Vue 2.0入门基础知识之内部指令

2018-06-24 00:29:59来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1.Vue.js介绍

        当前前端三大主流框架:Angular、React、Vue。React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升。另外,Vue友好的API文档更是一大特色。Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库。Vue.js具有响应式编程和组件化的特点。响应式编程,即保持状态和视图的同步,状态也可以说是数据吧;而其组件化的理念与React则一样,即“一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势。

2.内部指令

2-1.v-if v-else v-show:前两者一般配合使用,v-show的效果类似于v-if。

实例如下:

 1 <body>
 2     <div id="app">
 3        <p v-if="flag">if</p>
 4        <p v-else>else</p>
 5        <p v-show="flag">show</p>
 6     </div>
 7 </body>
 8 <script>
 9     var vm= new Vue({
10         el:"#app",
11         data:{
12             flag:true
13         }
14     });
15 </script>

DOM结构中,三个p标签中的内容是否显示在页面中取决于flag的布尔值属性。当flag为true时,if和show都会显示,else也不会存在于DOM结构中。v-if和v-show的不同体现在:v-if是根据条件的值判断是否加载,可以减轻服务器的压力,但是缺点是当改变条件的值,页面又要加载一次;v-show则无论条件的值是否为true,都会加载(若条件为true,则display属性设置为其默认属性,反之,设置为none)

2-2.v-for 循环指令

实例如下:

 1 <body>
 2     <div id="app">
 3      <ol>
 4          <li v-for="b in b">{{b}}</li>
 5      </ol>
 6     </div>
 7 </body>
 8 <script>
 9     var vm= new Vue({
10         el:"#app",
11         data:{
12           b:['a','b','c',1,2]
13         }
14     });
15 </script>

页面会显示5个li,插值的效果是li会显示与数组b一 一对应的元素,v-for有点类似于for in循环

2-3  v-text v-html 文本(html字符串)指令

 1 <body>
 2     <div id="app">
 3      <p v-text="msgText"></p>
 4      <p v-html="msgHtml"></p>
 5     </div>
 6 </body>
 7 <script>
 8     var vm= new Vue({
 9         el:"#app",
10         data:{
11           msgText:"China",
12           msgHtml:"<span>中国</span>"
13         }
14     });
15 </script>

可以联想到jquery的text()、html()。到现在,你会发现前面都是利用插值操作,即{{}},这种做法会在一定程度上影响性能。

2-4 v-on 绑定事件监听器

实例如下:

 1 <body>
 2     <div id="app">
 3      <button v-on:click="Hi()">Button</button>
 4     </div>
 5 </body>
 6 <script>
 7     var vm= new Vue({
 8         el:"#app",
 9         methods:{
10             Hi:function(){
11                 alert("Hello World!")
12             }
13         }
14     });
15 </script>

同理,类比jquery的on()方法,绑定事件用的,实例中v-on:click可以简写为@click。click可以替换成鼠标的其他操作,如mouseout、mouseover等等。

2-5 v-bind指令

实例如下:

<body>
    <div id="app">
        <a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

效果为a标签显示红色,且其src属性为vm.message。v-bind指令主要用于设置html标签的属性,其简写形式为 v-bind:——>:

2-6 v-model 数据双向绑定指令

实例如下:

 1 <body>
 2     <div id="app">
 3         <p>{{message}}</p>
 4         <input type="text" v-model="message">
 5     </div>
 6 </body>
 7 <script>
 8     var vm = new Vue({
 9         el: "#app",
10         data: {
11             message: "前端工程师"
12         }
13     });
14 </script>

当input输入的值发生变化时,p标签包含的内容也会随之变化,且与前者保持一致。

2-7 v-pre 指令

实例如下:

 1 <body>
 2     <div id="app">
 3         <p>{{message}}</p>
 4         <p v-pre>{{message}}</p>
 5     </div>
 6 </body>
 7 <script>
 8     var vm = new Vue({
 9         el: "#app",
10         data: {
11             message: "前端工程师"
12         }
13     });
14 </script>

第一个p标签输出“前端工程师”,而第二个p标签则会跳过vue编译,输出原始值,即{{message}}。

2-8 v-cloak指令

     v-cloak指令的作用是当DOM树构建好完成页面的渲染后才执行,且其须要与css一起使用

2-9 v-once指令

    v-once指令的作用是只有当DOM树第一次渲染时起作用。

 

好了,下一篇文章介绍一下Vue的全局API~

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:es6(一)

下一篇:AngularJS获取项目中定义的json文件