Vue.js 第1章 Vue常用指令学习
今日目标
能够写出第一个vue应用程序
能够接受为什么需要学vue
能够使用指令
能够通过指定完成简单的业务(增加删除查询)
能够理解mvvm
为什么要学习vue
-
企业需要
-
可以提高开发效率
实现vue中的 HelloWorld
让一个变量的内容能够在页面中展示
-
目标
-
如何引入vue.js文件
-
如何创建vue对象
-
如何定义vue中的数据成员
-
如何定义模板
-
如何让数据和模板进行关联
-
-
通过这个案例可以创建一个简单的Vue页面
-
实现过程
-
引入js
<!-- 1.引入vue.js文件 --> <script src="./js/vue2.js"></script>
创建vm实例
var vm = new Vue()
定义vm实例的成员
var vm = new Vue({ // 5.指定当前Vue实例所对象的模板。通过el指定。这个el名字不能改哦 el:'#app', // 3.定义数据成员-属性--名称只能是data // data是一个对象，里面可以存储任意类型的数据 data:{ msg:'HelloWorld', age:20 } })
创建模板
<div id='app'>
</div>
添加插值表达式用于展示指定名称的数据
<!-- 6.使用插值表达式展示指定的数据 -->
{{msg}}
能够理解mvvm
-
目标：能够明白vue是如何工作的
-
m:model:数据模型
-
v:view:视图--模板
-
vm:vue实例：实现数据和模板的关联
####常见报错：
Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option 当前vm实例中，属性或方法没有定义，但是在渲染的时候你却需要使用：确保这个成员或者属性你已经定义了。
Error compiling template
一定是模板写错了，不符合模板的语法
[Vue warn]: Error compiling template: <div id="app"> <a href="">{{msg}}</a> <span v-text="{{msg}}"></span> </div> - invalid expression: v-text="{{msg}}" 说明{{}}表达式不能通过指令的方式来使用
<p v-model="msg">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component. 当前p元素不支持v-model,你应该换成input select textarea
目标：
-
明白什么是指令
-
知道指定如何使用
-
知道不同的指令有什么样的功能，主要用在什么样的场景
#####插值表达式：{{}}
-
它到底有那些使用场景
-
它到底能怎么用
-
作用:可以实现 内容的替换：使用指定的成员值替换插值表达式
-
特点：
-
双大括号：{{}}
-
只能写在标签之间--双标签
-
这个值必须先定义好
-
-
其它常见的使用方式：
-
可以写表达式
-
可以实现实现运算
-
实现添加三元表达式
-
不能直接添加js逻辑结构
-
v-text
指令就相当于之前html标签的属性 <标签 属性=‘值’>，它的使用方式和属性基本一致 <标签 指令=‘值’>
目标：
-
作用：相当于{{}}，可以在标签之间添加数据 指定=“data中定义的成员”
-
什么场景使用：不想使用{{}},也可以使用v-text
v-html
目标：
-
明确v-html和v-text的区别
-
v-text会将内容原样输出，不解析不编译
-
v-html会将内容按html语法进行解析之后再输出解析的结果
-
-
使用场景
-
当你需要将数据进行html语法解析的时候使用
-
v-bind
目标
-
作用：可以实现网页标签属性值的动态绑定：这个标签的属性值是动态变化的。再说折一点：我想为标签的属性值绑定一个变量
-
使用场景：当标签的属性值是动态变化的时候变需要使用v-bind
-
如何使用
-
<标签 v-bind:属性=“值">
-
值可以是Data中定义的变量。值必须先定义好
-
简写：
-
动态绑定样式
-
动态设置样式变量
-
<div id="app">
<div :class="{box:isCollopse}"></div>
<button @click='isCollopse = !isCollopse'>展开和合并</button>
<p :class="[hasRed,hasunder]">这是p元素</p>
<p :style="{ fontSize: size + 'px' }">没写字</p>
</div>
v-for
目标：
-
作用：实现循环，可以循环遍历数组或对象
-
使用场景 ：动态渲染
-
如何使用：你想循环遍历生成谁，就在谁的结构中添加v-for
-
遍历数组：v-for="(value,index) in arr"
-
value：数组中的值
-
index:值所对应的索引
-
如果需要两个值就应该使用()包含，如果只需要其中一个值没有必要使用()包含，但是无论如何第一个值永远是value
-
-
遍历对象:v-for="(value,key,index) in obj"
-
value：数据对象的值
-
key:数据对象的键
-
index:数据对象的索引
-
-
示例
-
<tbody>
<tr v-for="value in stuList">
<td>{{value.id}}</td>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
<!-- <tr v-for="value in stuList">
<td v-for="(v,key) in value">{{v+":"+key}}</td>
</tr> -->
</tbody>
v-model
-
作用：实现双向数据绑定：你修改数据，页面中有相应的变化，修改页面中的数据，数据源数据有相应的变化
-
如何使用：v-model='值'
-
使用场景 ：有限制：只有input,select,textarea可以来实现v-model
-
将来你想收集用户数据的时候就可以使用v-model来实现
-
<div id="app">
<!-- <input type="text" :value="msg"> -->
用户名：<input type="text" v-model='username'> <br>
密码：<input type="password" v-model='userpass'> <br>
<button @click='login'>登陆</button>
</div>
v-on
-
作用：绑定事件监听器：说白了就是为元素绑定事件
-
如何使用
-
语法：<元素 v-on:事件名称=‘事件处理函数’>
-
一般这种自定义的事件的处理函数都会写在methods属性中(属性》》对象)
-
建议使用简写：<元素 @事件名称=‘事件处理函数’>
-
-
细节：
-
有关参数传递的细节
-
如果没有传递参数，就默认传递$event
-
如果手动传递了参数，那么$event就需要手动传递
-
-
修饰符：可以在绑定事件后添加设置，让事件能够产生某个行为
-
@click.修饰符=‘事件处理函数’
-
常用修饰：.stop（阻止事件冒泡）:prevent(阻止默认行为)
-
键修饰符：一般是针对于输入框而言
-
-
<input type="text" @keyup.enter='dodo' v-model='myname'> <input type="text" @keyup.13='dodo' v-model='myname'>
目标：
-
作用：
-
v-if可以根据值来决定这个元素是否需要渲染(说白了就是页面中是否有这个元素的dom结构)
-
v-show可以根据值来决定这个元素的display样式的值(none,block)
-
-
使用方式：
-
v-if='bool值|表达式'
-
v-show='bool值|表达式'
-
-
区别：
-
v-if:通过是否渲染元素来决定元素是显示还是不显示
-
v-show是通过控制元素的display样式的值来决定元素显示还是隐藏
-
-
使用场景
-
v-if:用户提示，它会反复的渲染元素，如果频繁的实现元素的显示和隐藏，不建议使用v-if,它会频繁的渲染页面的结构，造成渲染负担--异步操作一般考虑使用v-if
-
v-show:当元素频繁的进行显示和隐藏的时候就应该使用v-show,因为它并没有真正的销毁这个元素，可以节省创建元素的时间
-
v-if v-else v-else-if
作用：分支判断
细节： v-else v-else-if不能单独存储，必须先有v-if
使用方式：
<div id="app">
<input type="text" v-model='score'>
<p v-if="score>=90">A</p>
<p v-else-if="score>=80">B</p>
<p v-else-if="score>=70">C</p>
<p v-else-if="score>=60">D</p>
<p v-else>E</p>
</div>
作用：可以隐藏元素的显示，直到你认为可以显示了才会出现。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
使用方式：
-
添加一个指定的样式
<style> [v-cloak] { display: none; } </style>
- 在元素中添加这个指令
<p v-cloak>{{msg}}</p>
应用场景：元素如果还没有解析完毕，不应该出现在页面中
案例
-
目标：能够使用之前所讲的指令，并且能够熟悉这些的指令的使用场景
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #app { width: 600px; margin: 10px auto; } .tb { border-collapse: collapse; width: 100%; } .tb th { background-color: #0094ff; color: white; } .tb td, .tb th { padding: 5px; border: 1px solid black; text-align: center; } .add { padding: 5px; border: 1px solid black; margin-bottom: 10px; } </style> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <div class="add"> 编号: <input v-model="proId" type="text"> 品牌名称: <input v-model="name" type="text"> <input @click="addProduct" type="button" value="添加"> </div> <div class="add"> 品牌名称: <input type="text" placeholder="请输入搜索条件"> </div> <div> <table class="tb"> <thead> <tr> <th>编号</th> <th>品牌名称</th> <th>创立时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(value,index) in productList"> <td>{{value.id}}</td> <td>{{value.proName}}</td> <td>{{value.created}}</td> <td> <a @click.prevent="delProduct" href="#">删除</a> </td> </tr> </tbody> </table> </div> </div> <script> var vm = new Vue({ el: '#app', data: { proId: '', name: '', productList: [ { id: "1", proName: "中华", created: new Date() }, { id: "2", proName: "中华2", created: new Date() }, { id: "3", proName: "中华3", created: new Date() }, { id: "4", proName: "中华4", created: new Date() }, { id: "5", proName: "中华5", created: new Date() } ] }, methods: { addProduct(){ var obj = {id:this.proId,proName:this.name,created:new Date()} this.productList.push(obj) }, delProduct(){ this.productList.splice(0,1); } } }) </script> </body> </html>
