vue.js学习笔记1

vue.js学习笔记1

一、挂载点、模板、实例的关系

<div id="root">  <!--挂载点-->
  {{msg}}      <!--模板--><!--差值表达式方法-->
</div>

<script>  <!--实例-->
    new Vue({
        el:"#root",
        data:{
            msg:"hello word"
        }
    })
</script>

1. 模板的其他写法（除了差值表达式方法）：

   v-text:会对实例里的data数据转译

   <h1 v-text="msg"></h1>
   

   v-html: 不会对实例里的data数据转译

   <h1 v-html="msg"></h1>
   

2. 模板内容也可以使用tamplate写在实例里

   <script>  <!--实例-->
       new Vue({
           el:"#root",
           tamplate:"<h1>hello {{msg}}</h1>",
           data:{
               msg:"hello word"
           }
       })
   </script>
   

二、数据、事件和方法

1. 绑定点击事件 v-on:click=" "，实例里在methods里写方法

   <div id="root">
       <div v-on:click="handleClick">{{msg}}       </div>
   </div> 
   <script>
       new Vue({
           el: "#root",
           data: {
               msg: "Hello World",
           },
           methods: {
               handleClick: function () {
                   this.msg="world"
               }
           }
       })
   </script>
   

   v-on:可以简写为@符号

   <div @click="handleClick">{{msg}}       </div>
   

三、属性绑定和双向数据绑定

1. 属性绑定 v-bind

   v-bind:title属性和title数据项绑定，模板指令“”后跟的内容是js语句， v-bind:可以使用:代替。

   title:在鼠标到达的div显示title内容（类似注释吧）

   <div id="root">
       <div v-bind:title="title">hello world</div>  
   </div>
   <script>
       new Vue({
           el: "#root",
           data: {
               title: "this is hello world",
           }
       })
   </script>
   

2. 双向数据绑定

   v-model实现双向绑定：输入框显示content的内容，输入框内容改变时content也改变。

   <div id="root">
       <input v-model="content"/>  
       <div>{{content}}</div>
   </div>
   <script>
       new Vue({
           el: "#root",
           data: {
               content:"this is content"
           }
       })
   </script>
   

四、计算属性与侦听器

1. 计算属性computed

   一个属性通过其他属性计算而来

   <div id="root">
           姓<input v-model="firstName"/>
           名<input v-model="lastName"/>
           <div>{{fullName}}</div>
       </div>
       <script>
           new Vue({
               el: "#root",
               data: {
                   firstName: '',
                   lastName: '',
               },
               computed: {
                   fullName: function () {
                       return this.firstName + ' ' + this.lastName
                   }
               }
           })
           </script>
   

2. 侦听器watch

   侦听数据或者计算属性发生变化，然后做相应的处理

   <div id="root">
           姓<input v-model="firstName"/>
           名<input v-model="lastName"/>
           <div>{{fullName}}</div>
           <div>{{count}}</div>
       </div>
       <script>
           new Vue({
               el: "#root",
               data: {
                   firstName: '',
                   lastName: '',
                   count:0
               },
               computed: {
                   fullName: function () {
                       return this.firstName + ' ' + this.lastName
                   }
               },
               watch: {
                   firstName: function() {
                       this.count++
                   },
                   lastName: function() {
                       this.count++
                   }
               }
           })
           </script>
   

五、v-if，v-show，v-for指令

1. v-if和v-show

   v-if:当对应的数据项的内容是false的时候把标签从dom中移除；

   v-show:将标签隐藏，display属性变为none;

   显示隐藏频率大使用v-show。

   <div id="root">
       <div v-if="show">hello world</div>  
       <div v-show="show">hello world</div> 
       <button @click="handleClick">toggle</button>
   </div>
   <script>
       new Vue({
           el: "#root",
           data: {
               show: true,
           },
           methods: {
               handleClick: function () {
                   this.show = !this.show;
               }
           }
       })
       </script>
   

2. v-for

   数据做循环展示时使用v-for

   <div id="root">
       <div v-if="show">hello world</div>  
       <button @click="handleClick">toggle</button>
       <ul>
           <li v-for="(item,index) of list" :key="index">{{item}}</li>
           </ul>
   </div>
   <script>
       new Vue({
           el: "#root",
           data: {
               show: true,
               list:[1,2,3]
           },
           methods: {
               handleClick: function () {
                   this.show = !this.show;
               }
           }
       })
       </script>