Vue新手入门教程

谈谈我对Vue的理解

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

如何引用？

下面是一个helloWord,大家运行感受一下。

<!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>

运行效果如下：

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

解决闪烁问题：

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

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

这时候加个v-cloak属性即可解决

代码如下：有注释肯定能看懂。

<!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}}了

v-bind指令:

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

<!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 。