第一篇：基本介绍

引入

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>

使用

<script>
    new Vue({
    el:'#aa',
    data:{
              msg:'aaaaa',
              firstName:'',
              lastName:'',
              count:0
         }
    }),
     methods:{
         //定义函数
         handleClick:function(){
             alert(234)
             this.msg ="vvvvvv"
         }
     },
     computed:{
         fullName:function(){
             return this.firstName + ' '+this.lastName                  // this.firstName 和 this.lastName 任意一个变量发生改变,就会执行
         }
     },
     watch:{
         firstName:function(){                           // 只监听的这个变量 发生改变才会执行
             this.count++
         },
         lastName:function(){
             this.count++
         }
     }
     
</script>

挂载点就是 id='aa'的dom元素

模板是 dom元素里的内容

实例就是页面通过new vue显示出的效果

{{ }} 叫做 插值表达式

methods 里面是定义函数的

v-model 可以实现数据的双向绑定

computed 计算属性(数据联动) 设置变量，变量中有设置到的成员变量改变，这个设置的变量就会发生改变 -- 监听可以是很多个，但必须都是Vue实例中的变量

watch 监听器(异步场景) 监听设置的变量，变量改变会触发 -- 监听的是一个变量

v-text 内容由v-text后面指定的变量指定 会转义html

 v-once 指令 执行一次性地插值，当数据改变时，插值处的内容不会更新

v-html 指令：把字符串转成 html

v-bind指令

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

:class="['active','add',{'another':true}]"

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

条件渲染

v-if

v-else-if

v-else

<div v-if="num == 1">等于1</div>
<div v-else>不等于0</div>
<p v-if="seen">现在你看到我了</p>

v-for

<div v-for="vo of list">{{vo.name}}:{{vo.age}}</div>
list:[{name:'xxx',age:'35'},{name:'www',age:'23'}]
//输出下标的形式
<div v-for="(item,index) of list" :key='index'>{{vo.name}}:{{vo.age}}</div>

v-show与v-if的区别

v-show是修改display:none的样式，v-if是是否存在这个dom