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的使用

vue的使用要从创建Vue对象开始
```
var vm = new Vue();
```
创建vue对象的时候，需要传递参数，是json对象，json对象对象至少有两个属性(el'data)成员
```
var vm = new Vue({
      el:"#app",
      data: {
          数据变量:"变量值",
       },
});
```
el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
data: 保存vue.js中要显示到html页面的数据。

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

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

数据的显示

在双标签中显示纯文本内容要通过{{ }}来完成数据显示，双括号中还可以支持js表达式和符合js语法的代码，例如函数调用
如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model
```
 <input v-model="name">     
```
使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。

如果想输出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>

常用指令

v-if v-model v-for
两种写法的指令
vue1.x vue2.x
{{ 普通文本 }} {{普通文本}}
v-bind:属性名 :属性名
v-on:事件名 @时间名

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

详解

操作属性

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

事件绑定
1. 使用@事件名来进行事件的绑定
  语法：
```
     <h1 @click="num++">{{num}}</h1>
```
1. 绑定的事件的事件名，全部都是js的事件名：
  @submit ---> onsubmit
  @focus ---> onfocus
  @blur ---> onblur (失去焦点)
  @click ---> onclick
  ....

操作样式

通过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'
          }      
      }     
}

条件渲染

v-show
```
<div v-show="true"> my name is shuta </div>
```
v-show 如果为false,会给元素增加 display：none 的属性。
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对象提供的属性功能

过滤器

全局过滤器

Vue.filter("format", function(money){
      return money.toFixed(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已经发生了变化！");
                }
            }

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

生命周期

beforeCreate
vm对象创建前
created() 常用
vm对象创建后
beforeMount
数据渲染前,此时html还是模板形式
mounted 常用
数据渲染后,此时已经生成包含数据的html
beforeUpdate
模板中数据更新前,此时,js中的数据已经改动,但是模板中的数据还没更新
updated

模板中数据更新后

beforeDestroy
当vm 对象被销毁时执行,可以使用 vm.$destroy()模拟销毁
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 可以一块使用

1.vue基础——开始使用

vue