vue 的使用让前端的开发更加的便捷。内容:基础指令 ，VUE对象的属性功能 ，事件冒泡

vue

vue与jq的比较：

​ jq 擅长处理特效，vue擅长处理数据。如果数据处理较多则选vue，如果特效多则jq,如果都多则一块使用。

vue 使用注意事项

1. 一个html页面中，可以存在多个vue实例对象，但是实例对象的变量名强烈建议唯一，而且每个vue对象负责一个特效功能
 2. js 中虽有的变量和语法都对大小写敏感
 3. 实例话vue对象的代码写在body后边，防止出现绑定元素不存在的情况。写到body 前边时，需要写 window.onload()

vm对象时刻保证页面中的数据与data中的一致

在控制台中，打印vm对象，以$开头的为初始化时的属性。模型中的数据会作为vm对象的属性存在（不带$）

vue的使用

1. vue的使用要从创建Vue对象开始

   var vm = new Vue();

2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象至少有两个属性(el'data)成员

   var vm = new Vue({
         el:"#app",
         data: {
             数据变量:"变量值",
          },
   });

   el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
   data: 保存vue.js中要显示到html页面的数据。

3. vue.js要控制器的内容范围，必须先通过id来设置。

     <div id="app">
         <h1>{{message}}</h1>
         <p>{{message}}</p>
     </div>

数据的显示

1. 在双标签中显示纯文本内容要通过{{ }}来完成数据显示，双括号中还可以支持js表达式和符合js语法的代码，例如函数调用

2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model

    <input v-model="name">     

   使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。

3. 如果想输出html,则需要使用 v-html 指令

    <div class="app">
           <span v-html="img"></span>
   </div>
   <script>
          let vm = new Vue({
              el:".app",
              data:{
                  img:'<img src="images/shendan.png">',
              }
          })
   </script>    

常用指令

1. v-if v-model v-for

2. 两种写法的指令

   vue1.x	vue2.x
   {{ 普通文本 }}	{{普通文本}}
   v-bind:属性名	:属性名
   v-on:事件名	@时间名

3. 详解

   1. 操作属性

   <标签名 :标签属性="data属性"></标签名>

   1. 事件绑定

      1. 使用@事件名来进行事件的绑定
         语法：

           <h1 @click="num++">{{num}}</h1>

      1. 绑定的事件的事件名，全部都是js的事件名：
         @submit ---> onsubmit
         @focus ---> onfocus
         @blur ---> onblur (失去焦点)
         @click ---> onclick
         ....

   2. 操作样式

      • 通过class

        <style>
            .c_red{
               color:red; 
            }
            .bg_blue{
                background:blue
            }
            
        </style>
        <div class="box" :class="{c_red:true,.bg_blue:true}">2222</div>
        <div class="box" :class="myclass">2222</div>
        data:{
                  myclass:{
                    c-red:true,
                    bg-blue:false,
              
                 }
                }

      • 通过style(日常开发中尽量不要使用style 修改样式)

        <!--        //方式一：-->
                <div class="box" :style="{color:color1,background:bg1}">333</div>
        <!--        //方式二：-->
                <div class="box" :style="style2">2222</div>
        <!--        //方式三：-->
                <div class="box" :style="[style2,style3]">2222</div>
        data:{
             myclass:{
                 color1:'red',
                  bg1:'gray',
                  style2:{
                     color:'orange'
                   },
                   style3:{
                        background:'green'
                  }      
              }     
        }

条件渲染

1. v-show

   <div v-show="true"> my name is shuta </div>

   v-show 如果为false,会给元素增加 display：none 的属性。

2. v-if...v-else-if...v-else

   v-if 如果结果为false,则会将元素从dom中移除

循环

v-for

​ v-for可以将对象或者数组循环到页面中

• 数据为数组时

  1. 写法一

     <div v-for="book in book_list"> </div>

     book代表数组中的每一个元素

  2. 写法二

     <div v-for="(book,index) in book_list"> </div>

     index 代表数组的下标

• 数据为对象时

  1. 写法一

     <div v-for="book in book_list"> </div>

     book代表对象的每个值

  2. 写法二

     <div v-for="attr,book in book_list"> </div>

     attr 代表对象的每个下标

Vue对象提供的属性功能

过滤器

1. 全局过滤器

   Vue.filter("format", function(money){
         return money.toFixed(2)+'元'
   })

2. 局部过滤器

   var vm = new Vue({
     el:"#app",
     data:{},
     filters:{
      format(money){
           return money.toFixed(2)+'元'
       }
     }
   });

   局部过滤器只能在当前vm对象中使用，如果过滤器名字相同则优先使用局部过滤器

计算属性

computed:{   //计算属性：里面的函数都必须有返回值
                price2: function(){
                    return this.price + 1 +'元'
                }
            }

会自动根据其他的属性计算生成 price2

属性侦听

watch:{
                num:function(newval,oldval){
                    //num发生变化的时候，要执行的代码
                    console.log("num已经发生了变化！");
                }
            }

属性侦听过程中,会传入两个参数,一个时旧值,一个时新值

生命周期

1. beforeCreate
   vm对象创建前

2. created() 常用
   vm对象创建后

3. beforeMount
   数据渲染前,此时html还是模板形式

4. mounted 常用
   数据渲染后,此时已经生成包含数据的html

5. beforeUpdate
   模板中数据更新前,此时,js中的数据已经改动,但是模板中的数据还没更新

6. updated

模板中数据更新后

1. beforeDestroy

   当vm 对象被销毁时执行,可以使用 vm.$destroy()模拟销毁

2. destroyed

阻止事件冒泡

jq中使用return false.在js中可以这么写

function(event){
    event.stopPropagation
}

js中可以使用事件委托方式提高性能:

var ul = documeng.getElementById('app')
ul.onclick = function(event){
    var self = event.target
    console.log(self.innerHtml)
}

在vue中可以使用@click.stop阻止事件冒泡

<div @click="show('点击了1')"> 111
    <div @click.stop="show('点击了2')"> 22</div>
</div>

使用@click.prevent 阻止页面刷新,一般在ajax提交中使用

<a href="baidu.com" @click.prevent="show('点击了1')" > 111 </a>

@click.stop.click 可以一块使用