Vue.js（一）入门

1. vue的引入：

• cdn：

  <!-- 开发环境版本，包含了用帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>

• js：

  <!-- 开发环境版本，包含了用帮助的命令行警告 --><script type="text/javascript" src="js/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script type="text/javascript" src="js/vue.min.js"></script>

2 . 实例的重要参数：

•  data：数据都放在data中，data中的数据会在html结构中对应的地方响应

  <p id="app1">绑定内容1：{{ message1 }}</p>var app1 = new Vue({ ???el:"#app1", ???data:{ ???????message1:"内容1", ???????message2:"内容2" ???}})

• methods：‘方法的意思‘，里面存放一些方法

  <p id="app1" @click="funGo">绑定内容1：{{ info }}</p>//点击执行方法funGo --> 打印"内容"var app1 = new Vue({ ???el:"#app1", ???data:{ ???????info:"内容" ???} ???methods:{ ???????funGo:function(){ ???????????console.log(this.message1); ?//this指向Vue本身(也就是变量app1） ???????} ???}})

• watch：监听数据，当数据发生变化时候，可以调用函数

  <p id="app1">绑定内容1：{{ info }}</p>var app1 = new Vue({ ???el:"#app1", ???data:{ ???????info:"内容" ???}, ???methods:{ ???????funGo:function(){ ???????????this.info ++; ???????????console.log(this.info); ?//this指向Vue本身(也就是变量app1） ???????} ???}, ???watch:{ ???????‘info‘:function(val,oldVal){ ?//监听data中的数据info的变化，当info发生变化时打印val和oldVal ???????????console.log(val,oldVal); ?//val-改变后的值；oldVal-改变之前的值 ???????} ???}})

3 . 模板指令：

• html和vue对象的粘合剂
• 小结：
  • new一个Vue对象的时候可以设置它的属性，其中最重要的包括el，data，methods，watch 其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法vue对象里的设置通过html指令进行关联响应
  • 重要指令：
    • v-text 渲染数据
    • v-if  控制显示     
    • v-on  绑定事件
    • v-for  循环渲染
• 数据渲染：v-text  v-html  {{ }}

  <p id="app1">绑定内容1：{{ message1 }}</p><p v-text="info"></p><p v-html="info"></p> //保留html结构

• 判断/控制模板显示与影藏：v-if  v-show

  区别：v-if直接不渲染v-show是渲染了以后通过display:none;来影藏<p id="app" v-if="isSeen">abc</p>//表达式isSeen的值为true时，p标签显示，isSeen为false时，p标签影藏var app = new Vue({ ???el:"#app", ???data:{ ???????isSeen:false ???}})

•  渲染循环列表：v-for

  <ul id="app"> ???<li v-for="item in items">
  　　 ????<!--item为items中的每一项--> ???????<p v-text="item.label"></p> ???</li></ul>var app = new Vue({ ???el:"#app", ???data:{ ???????items:[ ???????????{label:"apple"}, ???????????{label:"banana"} ???????] ???}})
  ==>
  ·apple
  ·banana

•  事件绑定：v-on  缩写为@

  <button v-on:click="funGo">点击</button> ?//点击时调用vue的方法中的funGo方法<button @click="funGo">点击</button> //简写形式var app1 = new Vue({ ???el:"#app1", ???data:{ ???????info:"内容" ???}, ???methods:{ ???????funGo:function(){ ???????????this.info ++; ???????????console.log(this.info); ?//this指向Vue本身(也就是变量app1） ???????} ???}, ???watch:{ ???????‘info‘:function(val,oldVal){ ?//监听data中的数据info的变化，当info发生变化时打印val和oldVal ???????????console.log(val,oldVal); ?//val-改变后的值；oldVal-改变之前的值 ???????} ???}})

• 属性事件绑定：v-bind   绑定标签中的 id , class , src 等等...   缩写为：

  <img v-bind:src="imgSrc"><img :src="imgSrc">//常用的class可以简写<div :class="{ red:isRed }"></div><div :class="[classA,classB]"></div>
  <!--isB为true时classB存在，为false时不存在--><div :class="[classA,{ classB:isB , classC:isC }]"></div>

•  单次循环插值：v-once

  <p v-once id="app1">这个内容将不会改变：{{ message }}</p>
  //渲染一次后不在绑定var app1 = new Vue({ ???el:"#app1", ???data:{ ???????message:"内容" ???}})

•  原始html：v-html

  <p>内容：{{ rawHtml }}</p><p>内容：<span v-html="rawHtml"></span></p> ?//识别html标签==>内容：<span style="color:red">hello</span>内容：hello

4 . 实例中的前缀 $

• $data  $el  $watch

  var data = { a: 1 }var vm = new Vue({ ???el: "#app", ???data: data})//其中vm.$data === data //truevm.$el === document.getElementById("app");//$watch 是一个实例方法vm.$watch(‘a‘,function(newValue, oldValue){ ???//这个回调将在 vm.a 改变后调用})

 5 . 值中的 JavaScript表达式

• code

  <p>{{ num + 1 }}</p><p>{{ ok ? "yes" : "no" }}</p><p>{{ message.split(‘‘).reverse().join(‘‘) }}</p><p b-bind=" ‘item‘ + num "></p>//每个绑定只能包含单个表达式//以下例子不会生效{{ var a = 1 }} ?//这是语句，不是表达式{{ if (ok) { return message} }} ?//流控制语句也不会生效，请使用三元表达式

------- end -------