Vue预习课03：模板语法实践购物车.pdf

绑定语法

插值文本

使用“Mustache”语法（双大括号）来进行文本插值

HTML的特性绑定

使用v-bind:，缩写为:

  1.   <!-- 1.宿主元素 -->
  2.   <div id="app" :title="title">
  3.     {{title}}
  4.     <div v-bind:title="title">v-bind</div>
  5.   </div>
  7.         // 将vue绑定到宿主元素中
  8.     // 1.创建vue实例
  9.     new Vue({
  10.       el: '#app',
  11.       data: {
  12.         title: 'hello, vue'
  13.       }
  14.     })

也可以只绑定一次，使用v-once

  1. <div v-once>{{title}}</div>

列表渲染

使用v-for的写法

  1. <div id="app">
  2.   <div v-for="item in list" :key="item">{{item}}</div>
  3. </div>
  5. // 1.创建vue实例
  6.     new Vue({
  7.       el: '#app',
  8.       data: {
  9.         list: ['大数据', ' web']
  10.       }
  11.     })

表单输入绑定

使用v-model的指令

  1. <input type="text" v-model="course">

事件处理

使用v-on:的指令，也可以简写成@
在事件后面可以添加修饰符

  1. <!-- 添加了enter的修饰符 -->
  2. <input type="text" v-model="course" v-on:keyup.enter="addCourse">
  3. <!-- 没有添加修饰符 -->
  4. <button @click="addCourse">新增</button>

class和style绑定

class绑定

class传入的是对象的话：键是类名，值是判断这个类名是否展示 class传入的是数组的话：每一个元素的结果都是类名

  1. <li v-for="item in list" :key="item" :class="{active: item === selectedCourse}" @click="selectedCourse = item">{{item}}</li>

style的绑定

style传入的是对象：键是style的属性名（样式名是使用-分割的话，则需要使用单引号包裹或者使用驼峰命名,使用驼峰命名的时候vue内部进行转换），值是style的值 style传入的是数组：每一个元素的结果都是style

  1. <!-- 样式名是使用-分割的 -->
  2. <li v-for="item in list" :key="item" :style="{'background-color': selectedCourse === item ? '#ddd' : 'transparent'}" @click="selectedCourse = item">{{item}}</li>
  4. <!-- 样式名使用驼峰命名 -->
  5. <li v-for="item in list" :key="item" :style="{backgroundColor: selectedCourse === item ? '#ddd' : 'transparent'}" @click="selectedCourse = item">{{item}}</li>

条件渲染

使用v-if和v-else指令
v-if用于条件性的渲染一块内容。当v-if指令的表达式的结果是truthy值的时候被渲染
truthy：表示这个值可以转换成true

  1. <p v-if="list.length == 0">暂无课程数据</p>
  2. <ul v-else>
  3.   <li v-for="item in list" :key="item" :class="{active: item === selectedCourse}" @click="selectedCourse = item">{{item}}</li>
  4. </ul>

v-if不能和v-for在同一层级上，因为v-for的优先级高于v-if，在判断是否展示列表中的数据的时候，一定会执行v-for的渲染，会降低页面加载效率

v-if和v-show的区别
不论v-show指令的值是什么，在页面初始化的时候都会渲染v-show指令中的元素。v-show的本质是通过css的display属性来控制元素是否展示的

v-if指令的渲染是惰性渲染。当页面初始化的时候v-if指令的值为false时，不渲染v-if指令中的元素，直到v-if的指令是true时。v-if指令是通过元素是否在html中，来控制元素是否展示的

模板和渲染函数

vue会将模板编译成虚拟DOM的渲染函数，结合响应式系统，数据发生变更时，执行渲染（rander）函数，生成新的虚拟DOM，新旧虚拟DOM进行比较，将DOM的操作次数降到最低

Vue构造函数中的render函数可以替代div中写的模板

  1. <!-- 1.宿主元素 -->
  2.   <div id="app" :title="title">
  3.     <!--
  4.     使用render函数也可以生成  
  5.     <h2>{{title}}</h2>
  6.     <p>
  7.       <input type="text" v-model="course" v-on:keyup.enter="addCourse">
  8.       <button @click="addCourse">新增</button>
  9.     </p>
  10.     <p v-if="list.length == 0">暂无课程数据</p>
  11.     <ul v-else>
  12.       <li v-for="item in list" :key="item" :class="{active: item === selectedCourse}" @click="selectedCourse = item">{{item}}</li>
  13.     </ul> -->
  14.   </div>
  16.   <script src="../vue.js"></script>
  18.   <script>
  19.     // 将vue绑定到宿主元素中
  20.     // 1.创建vue实例
  21.     const app = new Vue({
  22.       el: '#app',
  23.       data: {
  24.         title: '购物车',
  25.         list: [],
  26.         course: '',
  27.         selectedCourse: ''
  28.       },
  29.       methods: {
  30.         addCourse () {
  31.           this.list.push(this.course);
  32.           this.course = '';
  33.         }
  34.       },
  35.       render () {
  36.         with(this){
  37.           return _c('div',{attrs:{"id":"app","title":title}},[_c('h2',[_v(_s(title))]),_v(" "),_c('p',[_c('input',{directives:[{name:"model",rawName:"v-model",value:(course),expression:"course"}],attrs:{"type":"text"},domProps:{"value":(course)},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return addCourse($event)},"input":function($event){if($event.target.composing)return;course=$event.target.value}}}),_v(" "),_c('button',{on:{"click":addCourse}},[_v("新增")])]),_v(" "),(list.length == 0)?_c('p',[_v("暂无课程数据")]):_c('ul',_l((list),function(item){return _c('li',{key:item,class:{active: item === selectedCourse},on:{"click":function($event){selectedCourse = item}}},[_v(_s(item))])}),0)])
  38.         };
  39.       }
  40.     })
  43.     console.log(app.$options.render);
  44.     /* 
  45.     下面是输出的app.$options.render
  46.     (function anonymous(
  47.     ) {
  48.     with(this){return _c('div',{attrs:{"id":"app","title":title}},[_c('h2',[_v(_s(title))]),_v(" "),_c('p',[_c('input',{directives:[{name:"model",rawName:"v-model",value:(course),expression:"course"}],attrs:{"type":"text"},domProps:{"value":(course)},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return addCourse($event)},"input":function($event){if($event.target.composing)return;course=$event.target.value}}}),_v(" "),_c('button',{on:{"click":addCourse}},[_v("新增")])]),_v(" "),(list.length == 0)?_c('p',[_v("暂无课程数据")]):_c('ul',_l((list),function(item){return _c('li',{key:item,class:{active: item === selectedCourse},on:{"click":function($event){selectedCourse = item}}},[_v(_s(item))])}),0)])}
  49.     })
  50.     */
  52.   </script>