内容概述

插值操作
绑定属性
计算属性
事件监听
条件判断
循环遍历
阶段案例
v-model

插值操作

如何将data中的文本数据，插入到HTML中呢？
我们已经学习过了，可以通过Mustache语法(也就是双大括号)。
Mustache:胡子/胡须
我们可以像下面这样来使用，并且数据是响应式的
image.png

基础指令-内容

指令: v-noce 只渲染一次,加载完之后,你再控制台修改内容,修改的则无效

  1. <div v-once id="app">

指令:v-html=’url’ 作用于带有标签的数据 (url)是定义的值

  1. <h2 v-html='url'></h2>

指令:v-text=’url’ 作用等于字符串类型的

  1. <h2 v-text='mingzi'></h2>

指令:v-pre 作用原封不动的显示出来

  1. <h2 v-pre>{{mingzi}}</h2>

指令:v-cloak 斗篷的意思(挡住)配合css使用,当网页加载完成后,浏览器会把这个命令解析掉,v-cloak会消失掉

  1. <div id="app" v-cloak>

动态指令-绑定属性

指令:v-bind

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
比如动态绑定a元素的href属性
比如动态绑定img元素的src属性
这个时候，我们可以使用v-bind指令：
作用：动态绑定属性 可以绑定任何的属性
缩写： :
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)

下面，我们就具体来学习v-bind的使用。

  1. <body>
  2.   <div  id="app">
  3.     <!-- 错误的做法: 这里不可以使用mustache语法 -->
  4.     <!-- <img src="{{imgUrl}}" alt=""> -->
  5.     <!-- 正确的做法: 使用v-bind指令 -->
  6.     <h2><a v-bind:href="aHerf">212</a> 111</h2>
  7.     <img v-bind:src="imgUrl" alt="">
  8.     //语法糖写法
  9.     <a :href="aHerf">你好世界</a>
  10.     <img :src="imgUrl" alt="">
  11.   </div>   
  12.   <script>
  13.     const app = new Vue({
  14.       el:'#app',
  15.       data:{
  16.         mingzi:'小明',
  17.         url:'<a href="https://184383.vip">编程记录</a>',
  18.         imgUrl:'https://cn.vuejs.org/images/imooc-sponsor2.png',
  19.         aHerf:'https://184383.vip'
  20.       }
  21.     })
  22.   </script> 
  23. </body>

动态绑定class对象语法

{} 一个大括号表示对象语法
{{}} 2个大括号表示Mustache语法

通过布尔值,决定是否显示这个类型,这个作用在于显示不同的样式

Class对象语法(1)

  1. <style>
  2.   .huoyue{
  3.     color: red;
  4.     font-weight: bold;
  5.     font-size: 50px;
  6.   }
  7.   .line{
  8.     color: green;
  9.     font-weight: bold;
  10.     font-size: 50px;
  11.   }
  12. </style>
  13. </head>
  14. <body>
  15.   <div id="app">
  16.     <!-- <div :class="huoyue">class绑定(普通绑定的方式)</div>
  17. <div :class="{{}}">{{mingzi}}</div> -->
  18.     <!-- 对象的意义里面可以放键值对 -->
  19.     <!-- <h2 class="{key1: value1, key2: value2,key3: value3}">{{mingzi}}</h2> -->
  20.     <!-- <h2 v-bind:class="{类名1: boolean, 类名2: boolean}">{{mingzi}}</h2> -->
  21.     <!-- 通过类名的布尔值类型 来决定 是否添加这个类型 -->
  22.     标题的class=”title”这个class是默认的,会和bind的class合并,不覆盖
  23.     <h2 class="title" v-bind:class="{huoyue: isHuoyue, line: isLine}">{{mingzi}}</h2>
  24.   </div>   
  25.   <script>
  26.     const app = new Vue({
  27.       el:'#app',
  28.       data:{
  29.         mingzi:'小明',
  30.         url:'<a href="https://184383.vip">编程记录</a>',
  31.         imgUrl:'https://cn.vuejs.org/images/imooc-sponsor2.png',
  32.         aHerf:'https://184383.vip',
  33.         isHuoyue:true,//true 决定显示
  34.         isLine:false    //false 决定不显示
  35.       }
  36.     })
  38.   </script> 
  39. </body>

Class对象语法(2)

直接调用函数

  1. <style>
  2.   .huoyue {
  3.     color: red;
  4.     font-weight: bold;
  5.     font-size: 50px;
  6.   }
  8.   .line {
  9.     color: green;
  10.     font-weight: bold;
  11.     font-size: 50px;
  12.   }
  13. </style>
  14. </head>
  15. <body>
  16.   <div id="app">
  17.     <!-- <div :class="huoyue">class绑定(普通绑定的方式)</div>
  18. <div :class="{{}}">{{mingzi}}</div> -->
  19.     <!-- 对象的意义里面可以放键值对 -->
  20.     <!-- <h2 class="{key1: value1, key2: value2,key3: value3}">{{mingzi}}</h2> -->
  21.     <!-- <h2 v-bind:class="{类名1: boolean, 类名2: boolean}">{{mingzi}}</h2> -->
  22.     <!-- 通过类名的布尔值类型 来决定 是否添加这个类型 -->
  23.     <h2 class="title" v-bind:class="{huoyue: isHuoyue, line: isLine}">{{mingzi}}</h2>
  24.     <h2 class="title" v-bind:class="getClass()">{{mingzi2}}</h2>调用函数
  25.     <button v-on:click='btnClick'>按钮</button>
  26.   </div>
  27.   <script>
  28.     const app = new Vue({
  29.       el: '#app',
  30.       data: {
  31.         mingzi: '小明',
  32.         mingzi2: 'leochen',
  33.         isHuoyue: true,//true 决定显示
  34.         isLine: true,    //false 决定不显示
  35.       },
  36.       methods: {
  37.         btnClick: function () {
  38.           this.isLine = !this.isLine
  39.         },
  40.         getClass:function ()  {
  41.           return { huoyue: this.isHuoyue, line: this.isLine }
  42.         }
  43.       }
  44.     })
  45.   </script>
  46. </body>

v-bind绑定class（一）

很多时候，我们希望动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。
绑定class有两种方式：
对象语法
数组语法

v-bind绑定class（二）

用法一：直接通过{}绑定一个类

Hello World

用法二：也可以通过判断，传入多个值

Hello World

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类

Hello World

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

Hello World

动态绑定class 数组语法

动态绑定style对象语法

1.对象的方式 2.函数的方式

  1. <body>
  2.   <div id="app">
  3.     <!-- <h2 class="title" :style="{key(属性名):value(属性值)}">{{mingzi}}</h2> -->
  4.     <h2 class="title" :style="{fontSize:daxiao,backgroundColor :backColor}">{{mingzi}}</h2>
  5.     <h2 class="title" :style="getStyle()">{{mingzi}}</h2>
  6.   </div>
  7.   <script>
  8.     const app = new Vue({
  9.       el: '#app',
  10.       data: {
  11.         mingzi: '小明',
  12.         daxiao:'100px',
  13.         backColor:'red'
  14.       },
  15.       methods:{
  16.         getStyle:function(){
  17.           return {fontSize :this.daxiao , backgroundColor:this.backColor}
  18.         }
  19.       }
  20.     })
  21.   </script>
  22. </body>

动态绑定style 数组语法

1.数组的方式 2. 函数的方式

  1. <body>
  2.   <div id="app">
  3.     <!-- <h2 class="title" :style="[变量]">{{mingzi}}</h2> -->
  4.     <h2 class="title" :style="[baseColor]">{{mingzi}}</h2>
  5.     <h2 class="title" :style="getStyle()">{{mingzi}}</h2>
  7.   </div>
  8.   <script>
  9.     const app = new Vue({
  10.       el: '#app',
  11.       data: {
  12.         mingzi: '小明',
  13.         daxiao:'100px',
  14.         backColor:'blue',
  15.         baseColor:{
  16.           backgroundColor:'pink',
  17.           fontSize:'100px'
  18.         }
  19.       },
  20.       methods:{
  21.         getStyle:function(){
  22.           return {fontSize :this.daxiao , backgroundColor:this.backColor}
  23.         }
  24.       }
  25.     })
  26.   </script>
  27. </body>

计算属性基本使用

  1. <body>
  2.   <div id="app">
  3.     <!-- <h2 class="title" :style="[变量]">{{mingzi}}</h2> -->
  4.     <h2>{{firstName +''+lastName}}</h2>
  5.     <h2>{{lastName}}{{firstName}}</h2>
  6.     <h2>{{getFunllName()}}</h2>
  7.     <!-- 计算属性的最常用法 -->
  8.     <h2>{{funllName}}</h2>
  10.   </div>
  11.   <script>
  12.     const app = new Vue({
  13.       el: '#app',
  14.       data: {
  15.         firstName: '小明',
  16.         lastName: '老陈'
  17.       },
  18.       computed:{//固定的计算属性命令
  19.         funllName:function(){
  20.           return this.firstName+''+this.lastName
  21.         }
  22.       },
  23.       methods:{
  24.         getFunllName:function(){
  25.           return this.firstName + ''+this.lastName
  26.         }
  27.       }
  28.     })
  29.   </script>
  30. </body>

计算属性的复杂操作

  1. <body>
  2.   <div id="app">
  4.     <!-- 计算属性的最常用法 -->
  5.     <h2>总价格:{{totalPrice}}</h2>
  6.   </div>
  7.   <script>
  8.     const app = new Vue({
  9.       el: '#app',
  10.       data: {
  11.         firstName: '小明',
  12.         lastName: '老陈',
  13.         books: [
  14.           { id: 100, name: '编程艺术', price: 15 },
  15.           { id: 100, name: '代码大全', price: 25 },
  16.           { id: 100, name: '深入理解计算器原理', price: 23 },
  17.           { id: 100, name: '现代操作系统', price: 56 },
  18.         ]
  19.       },
  20.       computed: {//固定的计算属性命令
  21.         //高级函数  filter / map / reduce
  22.         totalPrice: function () {
  23.           let result=0
  24.           //方法1 (es5的语法)
  25.           // for (let i = 0; i < this.books.length; i++) {
  26.           //     result+= this.books[i].price
  27.           // }
  28.           //方法2
  29.           // for(let i in this.books){
  30.           //     result+=this.books[i].price
  31.           // }
  33.           //方法3 (ES6的语法)
  34.           for(let book of this.books){
  35.             result+=book.price
  36.           }
  37.           return result
  38.         }
  39.       }
  40.     })
  41.   </script>
  42. </body>