Vue新手入门教程

javascript/jquery

浏览数:127

2019-9-17

AD:资源代下载服务

谈谈我对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 。

 

作者:秃桔子