请选择 进入手机版 | 继续访问电脑版
查看: 359|回复: 0

[JavaScript] Vue 2.0入门基础知识之内部指令教程

[复制链接]

911

主题

911

帖子

2783

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2783
发表于 2017-11-27 19:39:10 | 显示全部楼层 |阅读模式
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <div id="app">
    <p v-if="flag">if</p>
    <p v-else>else</p>
    <p v-show="flag">show</p>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
      flag:true
    }
  });
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <div id="app">
   <ol>
     <li v-for="b in b">{{b}}</li>
   </ol>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     b:['a','b','c',1,2]
    }
  });
</script>




页面会显示5个li,插值的效果是li会显示与数组b一 一对应的元素,v-for有点类似于for in循环
2-3  v-text v-html 文本(html字符串)指令
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <div id="app">
   <p v-text="msgText"></p>
   <p v-html="msgHtml"></p>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     msgText:"China",
     msgHtml:"<span>中国</span>"
    }
  });
</script>




可以联想到jquery的text()、html()。到现在,你会发现前面都是利用插值操作,即{{}},这种做法会在一定程度上影响性能。
2-4 v-on 绑定事件监听器
实例如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <div id="app">
   <button v-on:click="Hi()">Button</button>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    methods:{
      Hi:function(){
        alert("Hello World!")
      }
    }
  });
</script>




同理,类比jquery的on()方法,绑定事件用的,实例中v-on:click可以简写为@click。click可以替换成鼠标的其他操作,如mouseout、mouseover等等。
2-5 v-bind指令
实例如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<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
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <div id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message">
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>




当input输入的值发生变化时,p标签包含的内容也会随之变化,且与前者保持一致。
2-7 v-pre 指令
实例如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <div id="app">
    <p>{{message}}</p>
    <p v-pre>{{message}}</p>
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>




第一个p标签输出“前端工程师”,而第二个p标签则会跳过vue编译,输出原始值,即{{message}}。
2-8 v-cloak指令
     v-cloak指令的作用是当DOM树构建好完成页面的渲染后才执行,且其须要与css一起使用
2-9 v-once指令
    v-once指令的作用是只有当DOM树第一次渲染时起作用。
总结
以上所述是小编给大家介绍的Vue 2.0入门基础知识之内部指令详解,希望对大家有所帮助!

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入COS论坛

本版积分规则

COS系统论坛(cosxitong.cn)COS操作系统是由上海联彤与中科院软件研究所在北京时间2014年1月15日在北京联合发布具有自主知识产权的操作系统COS(China Operating System,意为中国操作系统),该操作系统可应用于个人电脑、智能掌上终端、机顶盒、智能家电等领域。
友链QQ:673672871
© 2014 COS操作系统论坛 Powered by Discuz!X 3.2  Template by COS系统论坛 
快速回复 返回顶部 返回列表