Vue新手入门教程

时间 2019-12-19

标签 vue 新手入门教程繁體版

原文原文链接

谈谈我对Vue的理解

vue就是前端上的Java，前端上的C#。有个前端的虚拟DOM引擎，设计理念和Java，C#相似。咱们只须要告诉DOM应该显示什么，而不用去操做DOM元素。javascript

如何引用？

下面是一个helloWord,你们运行感觉一下。css

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="utf-8">
</head>
<body>
<div id="app">
    <!--使用 v-cloak可以解决插值闪烁问题-->
    <p>{{msg}}</p>
    
</div>
<script type="text/javascript">
    //VM层
    var vm = new Vue({
        el:'#app',//表示，当前咱们new这个vue的实例，要控制页面上的哪一个区域
        //M层
        data:{//data属性中存放的是el中要用的数据
            msg:'HelloWorld'//经过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操做dom元素了。
        }
    })
</script>
</body>
</html>

运行效果以下：html

这里当导入了vue.js库后，里面会有个Vue的构造器，对应着div。vue构造器中里面的el绑定div，data绑定数据。前端

解决闪烁问题：

相信新手都遇到过这个问题：vue

能看到{{msg}}是否是很没有B格？java

这时候加个v-cloak属性便可解决程序员

代码以下：有注释确定能看懂。npm

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8">
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--使用 v-cloak可以解决插值闪烁问题-->
    <p v-cloak>{{msg}}</p>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
    //VM层
    
    var vm = new Vue({
        el:'#app',//表示，当前咱们new这个vue的实例，要控制页面上的哪一个区域
        //M层
        data:{//data属性中存放的是el中要用的数据
            msg:'欢迎学习Vue'//经过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操做dom元素了。
        }
    })
</script>
</body>
</html>

这时候就看不见{{msg}}了app

v-bind指令:

v-bind是vue中提供的用于绑定属性的指令实例代码以下：dom

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="utf-8">
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--使用 v-cloak可以解决插值闪烁问题-->
    <p v-cloak>{{msg}}</p>
    <input type="button" v-bind:value="value">
</div>
<script type="text/javascript">
    //VM层
    
    var vm = new Vue({
        el:'#app',//表示，当前咱们new这个vue的实例，要控制页面上的哪一个区域
        //M层
        data:{//data属性中存放的是el中要用的数据
            msg:'欢迎学习Vue'//经过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操做dom元素了。
            ,value:'按钮'
        }
    })
</script>
</body>
</html>

运行结果：

能够看到bind可以绑定属性值。

原理：v-bind会把原属性值变成js变量解析。

注意：v-bind指令能够被简写位：要绑定的属性

v-bind中能够写合法的js表达式。

v-on指令：

Vue中提供了v-on事件绑定机制。

示例代码以下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="utf-8">
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--使用 v-cloak可以解决插值闪烁问题-->
    <p v-cloak>{{msg}}</p>
    <input type="button" v-bind:value="value" v-on:click="show">
</div>
<script type="text/javascript">
    //VM层
    
    var vm = new Vue({
        el:'#app',//表示，当前咱们new这个vue的实例，要控制页面上的哪一个区域
        //M层
        data:{//data属性中存放的是el中要用的数据
            msg:'欢迎学习Vue'//经过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操做dom元素了。
            ,value:'按钮'
        },
        methods:{//这个methods属性中定义了当前Vue实例全部可用的方法
            show: function(){
                alert("Hello");
            }
        }
    })
</script>
</body>
</html>

截止以下：咱们掌握了如何定义一个基本的Vue代码结构，插值表达式，v-cloak，v-html，v-bind v-on 。