你对Vue了解多少?

  • A+
所属分类:IT技术

你对Vue了解多少?

Vue的优点

  1. Vue实现了ui和逻辑的绑定:帮助用户自动完成界面和数据的绑定,界面更新或者数据更新都会引发另一方的自动更新,这为开发者节省了很多工作量。平时写的js代码,80%代码是在操作dom树,其实就是通过逻辑数据更新ui,这部分vue帮我们做好了,我们在写前端的时候,再也不用操心这些了。
  2. 组件式开发:将ui可重用的部分或者逻辑复杂的部分分割出来,单独做成组件,其实这也是一种面向对象的思维,通过独立出组件,降低代码复杂度,实现组件的复用。

挂载点

 

  1. <div id ="root"></div>
  2. <script>
  3.     new Vue({
  4.         el:"#root"
  5.     })
  6. </script>

该div叫做vue实例的挂载点,可通过id进行vue实例和标签的绑定

插值表达式

  1. <div id ="root">{{msg}}</div>  
  2. <script>  
  3.     new Vue({  
  4.         el:"#root",  
  5.         data:{  
  6.             msg:"hello world!",  
  7.         },  
  8.     })  
  9. </script>  

插值表达式完成数据和标签的单向绑定,数据变化,则标签内容也会跟着改变,少去了以前通过获取标签元素来改变标签内容的繁琐

模板

  1. <div id ="root">模板区域</div>
  2. <script>
  3.     new Vue({
  4.         el:"#root",
  5.         template:"<h1>{{msg}}</h1>",
  6.         data:{
  7.             msg:"hello world!",
  8.         },
  9.     })
  10. </script>

模板中的内容会自动替换挂载点中的内容,如果挂载点中存在其他内容或者标签元素,则会被模板覆盖。模板区域即模板内容,如果vue中没有定义模板,那么会将模板区域中内容解析为vue中的模板内容。挂载点和vue关联时,其实html内容可以被看作为转换为了vue实例。

v-textv-html

可利用vue中提供的v-text和v-html来显示标签内容

 

  1. <div id ="root">
  2.     <div v-text=" content "></div >
  3.     <div v-html=" content "></div >
  4. </div>
  5. <script>
  6.     new Vue({
  7.         el:"#root",
  8.         data:{
  9.             content:'<h1>hello</h1>',
  10.         }
  11.     })
  12. </script>

v-text直接显示变量内容,v-html通过html语法解析变量内容后再显示

事件绑定

  1. <div id ="root">
  2.     <div v-on:click="handleclick">{{number}}</div>
  3.     <div @click="handleclick">{{number}}</div>
  4. </div>
  5. <script>
  6.     new Vue({
  7.         el:"#root",
  8.         data:{
  9.             number:123
  10.         },
  11.         methods:{
  12.             handleclick:function () {
  13.                 this.number = "333"
  14.             }
  15.         }
  16.     })
  17. </script>

@click是v-on:click的简写,通过在事件绑定函数中修改number变量的值来修改元素标签内容,只要vue中变量更新,挂载点中内容自动更新。

属性绑定

  1. <div id="root">
  2.     <div v-bind:title="title">hello world</div>
  3.     <div :title="'ddd '+title">hello world</div>
  4. </div>
  5. <script>
  6.     new Vue({
  7.         el:"#root",
  8.         data:{
  9.             title:"this is me"
  10.         }
  11.     })
  12. </script>

Vue中属性绑定语法v-bind,:是缩写,完成div的title属性和vue中的title变量绑定

双向数据绑定

  1. <div id="root">
  2.     <input v-model = 'content'/>
  3.     <div>{{content}}</div>
  4. </div>
  5. <script>
  6.     new Vue({
  7.         el:"#root",
  8.         data:{
  9.             content:"this is content"
  10.         }
  11.     })
  12. </script>

v-model完成input输入框内容和vue中content变量的双向绑定,input输入框内容改变,同时改变vue中content变量;vue中content变量改变同时改变input输入框内容。

计算属性和侦听器

  1. <div id="root">
  2.    姓:<input v-model = "firstname"/>
  3.     名:<input v-model = "lastname"/>
  4.     <div>{{fullname}}</div>
  5.     <div>{{count}}</div>
  6. </div>
  7. <script>
  8.     new Vue({
  9.         el:"#root",
  10.         data:{
  11.            firstname:"",
  12.             lastname:"",
  13.             count:0
  14.         },
  15.         computed:{  
  16.             fullname:function () {  
  17.                 return this.firstname+this.lastname  
  18.             }  
  19.         },  
  20.         watch:{  
  21.             firstname:function () {  
  22.                 this.count++;  
  23.             },  
  24.             lastname:function () {  
  25.                 this.count++;  
  26.             }  
  27.         }  
  28.     })
  29. </script>

计算属性中的函数,只有其依赖是数据发生变化时才会调用,否则,每次使用fullname,其实使用的是缓存值,提高效率。数据变化时,会自动调用侦听器。

v-ifv-show

  1. <div id="root">
  2.     <div v-if="show">hello world</div>
  3.     <div v-show="show">hello world2</div>
  4.     <button @click="handleclick">toggle</button>
  5. </div>
  6. <script>
  7.     new Vue({
  8.         el:"#root",
  9.         data:{
  10.             show:true
  11.         },
  12.         methods:{
  13.             handleclick:function () {
  14.                 this.show = !this.show;
  15.             }
  16.         }
  17.     })
  18. </script>

v-if、v-show属性都可以通过控制属性值为true/false来显隐标签,区别是,如果设置为false,v-if会将div标签从dom树中移除,而v-show只是为div添加了属性style="display: none;"

v-for

  1. <div id="root">
  2.     <ul>
  3.         <li v-for = "(item,index) of list" :key="index">{{item}} </li>
  4.     </ul>
  5. </div>
  6. <script>
  7.     new Vue({
  8.         el:"#root",
  9.         data:{
  10.             list:[1,2,3]
  11.         }
  12.     })
  13. </script>

v-for属性用于显示list数据,循环list中的数据,并循环创建li标签,item指的list中的元素,index为该元素在list中的索引号

组件

 

  1. <div id="root">
  2.     <input v-model = "inputvalue"/>
  3.     <button @click = "handleclick">提交</button>
  4.     <ul>
  5.         <!--<li v-for="(item,index) of list" :key="index">{{item}}</li>-->
  6.         <todo-item2 v-for="(item,index) of list" :key="index" :lgw="item"></todo-item2>
  7.     </ul>
  8. </div>
  9. <div id="root2">
  10.     <ul>
  11.         <todo-item2></todo-item2>
  12.     </ul>
  13. </div>
  14. <script>
  15.     Vue.component("todo-item1",{
  16.         template:"<li>item</li>"
  17.     });
  18.     var TodoItem = {  
  19.         props:['lgw'],  
  20.         template:"<li>{{lgw}}</li>"  
  21.     };  
  22.     new Vue({
  23.         el:"#root2"
  24.     });
  25.     new Vue({
  26.         el:"#root",
  27.         components:{  
  28.            'todo-item2' :TodoItem  
  29.         },  
  30.         data:{
  31.             inputvalue:"",
  32.             list:[]
  33.         },
  34.         methods:{
  35.             handleclick: function () {
  36.                 this.list.push(this.inputvalue);
  37.                 this.inputvalue="";
  38.             }
  39.         }
  40.     })
  41. </script>

Vue提供了组件定制功能,组件即将可以封装起来的功能封装起来,比如li,如果我需要对li进行个性化定制,并且在多处重复使用,那么我可以将其做成组件。Vue可以做成局部组件和全局组件,全局组件指该组件可在vue的所有挂载点中使用,采用Vue.component方法注册;局部组件只能在当前vue的挂载点中使用,其他挂载点无法使用,采用components:{ 'todo-item2' :TodoItem}方式注册。每个组件其实就是一个vue实例,在vue模板中嵌入组件,其实就是在vue实例中嵌入vue实例,每个组件可以使用vue实例的所有功能。

父组件向子组件传值可采用定义属性的方式,如定义的“lgw”属性;子组件向父组件传值,采用发布订阅的方式,如emit,子组件发布,父组件订阅

  • 我的微信
  • weinxin
  • 微信公众号
  • weinxin
阿拉灯aladeng

发表评论

您必须才能发表评论!