一 Vue基础
目录
模板语法
一、概要
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层实际上是，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能的计算出最少需要重新渲染多少组件，并把DOM操作次数减少到最少
二、插值
1、说明
将数据插入到html文档中，包含 文本、html元素、元素属性等相当于我们Jquery里的DOM操作
2、文本插值
- 说明
文本插值中用得最多的就是用双大括号{{变量}}的形式 - 示例代码
<div id="app"> <h1>{{title}}</h1> </div> <script> new Vue({ el: "#app", //数据绑定区 data: { title: "就是这么简单", }, }); </script>
3、HTML插值
- 说明
是在HTML标签中插入内容,被插入的内容都会被当做 HTML 数据绑定会被忽略。语法格式 **v-html="变量" **的方式 - 示例代码
<div id="app"> <p v-html="msg"></p> </div> <script> new Vue({ el: "#app", data: { msg: "<span>在标签中插入的内容</span>", } }) </script> -
渲染效果图
image
- 注意
你不能使用v-html来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元
三、指令
1、说明
指令 (Directives) 是带有
v-前缀的特殊属性当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
语法格式 v-指令 : [参数.[修饰符] ]= "值", 大部分指令接受一个参数,值的话就是Vue实例data中的变量,也支持简单js表达式
2、v-text
-
说明
更新元素的的内容,作用等同于{{ }} -
语法格式
v-text="val" -
参数说明
对应Vue对象中的中data的属性
-
示例代码
<div id="app"> <p>价格：{{ price }}</p> <p v-text="'价格：' + price"></p> </div> <script> let vm = new Vue({ el: "#app", data: { price: 99.00, } }) </script> -
注意
-
在Vue中要想输出字符串，必须添加单引号，否则会报错。比如
<h1 v-text="'文本内容：' +text"></h1>。 -
{{}}代表的就是""，所以在v-text=""中，我们在内容里面就不需要再写{{}}了，直接写数据属性就行了。
-
-
区别
-
{{text}}：将数据解析为纯文本，不能输出真正的html，在页面加载时显示{{}}，所以通常使用v-html和v-text代替，且花括号方式在以后可能被取消
-
v-html="html"：输出真正的html
-
v-text="text"：将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不显示{{}}
-
3、v-bind
-
说明
当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
-
语法格式
v-bind:property="val" // 或者简写方式 :property="val" -
参数
-
property
html元素的属性
-
val
对应vue对象里的data的变量名
-
-
示例代码
<div id="app"> <!-- 完整语法 --> <a v-bind:href="url" v-text="content"></a> <!-- 缩写 --> <a :href="url" v-text="content"></a> <img :img="img" > </div> <script> var vm = new Vue({ el: '#app', data: { content:"百度一下", url: 'https://www.baidu.com', img:"http://ts.51ui.cn/pc/9-160Q2215F4.jpg" } }) </script>
4、v-on
.00
-
说明
给元素绑定事件,绑定的事件从
methods中获取. -
语法格式
v-on:event="fun" // or v-on:event="fun(param,...)" // or 简写方式 @event="fun" //绑定多个事件,多个事件以‘，’号隔开 v-on={event:fun,event:fun,....} -
参数说明
-
event
事件名
-
fun
定义在vue对象里methods里的方法,如果方法没有参数,可以省略()
-
param
方法中的参数
-
-
备注
常见的事件有 @focus，@blur，@submit，@mousemove，@mouseleave，@mouseout等
-
示例代码
<div id="app"> <p> <span v-text="'价格:' + price"></span> <span v-text="'数量:' + num"></span> </p> <!-- 完整语法 --> <button v-on:click="btn">结算</button> <!-- 简写方式 --> <button @click="btn">结算</button> <p>总金额: {{ total }}</p> <!-- 传递参数 --> <button @click="add(1,2)">传递参数</button> </div> <script> new Vue({ el: '#app', data: { total: 0, num: 1, price: 20.00, numbers: 1 }, methods: { btn: function () { this.total = this.num * this.price }, add: function (n1, n2) { alert(n1 + n2) } } }) </script> -
事件修饰符
-
.stop阻止冒泡，调用 event.stopPropagation() -
.prevent阻止默认事件，调用 event.preventDefault() -
.capture添加事件侦听器时使用事件捕获模式 -
.self只当事件在该元素本身（比如不是子元素）触发时触发回调 -
.once事件只触发一次
-
-
示例代码
<!-- 停止冒泡 --> <button @click.stop="do"></button> <!-- 阻止默认行为 --> <button @click.prevent="do"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 多个修饰符 --> <button @click.stop.prevent="do"></button> <!-- 点击回调只会触发一次 --> <button v-on:click.once="do"></button>
5、v-model
-
说明
在表单元素上创建双向数据绑定, 监听用户的输入事件以更新数据
-
语法格式
v-model="val" -
参数
- val
-
示例代码
<div id="app"> <span v-text="msg"></span> <input type="text" v-model="msg"> </div> <script> new Vue({ el: "#app", data: { msg: "msg", } }) </script>
6、v-for
-
说明
当需要将一个数组或者对象循环遍历显示的时候可以使用v-for指令
也支持用在templete（包裹元素）元素上的，以此来进行多个元素的渲染
-
语法格式
// 遍历数组 index 可选 v-for = "item in items" v-for = "(item,[index]) in items" // 遍历对象 v-for =" (item,[key],[index]) in items" -
参数说明
-
括号及其内的遍历结果信息（item, key, index）
item 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key/index 都是可选参数，如果不需要，这个指令其实可以写成 v-for="item in items"；
-
遍历关键词 in
in 可以使用 of 替代，官方的说法是它是最接近 JavaScript 迭代器的语法，但其实使用上并没有任何区别；
-
**被遍历对象items **
items 是绑定在实例 data 属性上的一个属性
-
-
示例代码
<!--基础使用--> <div id="app"> <!--数组--> <p v-for="(item,index) in nums"> {{index + ' : ' + item}} </p> <!--对象--> <p v-for="(item, key, index) in user"> {{index + ' : ' + key + ' : ' + item}} </p> <!--字符串--> <p v-for="item in name"> {{item}} </p> <!--数字 遍历数字是从1遍历到指定值--> <p v-for="item in num"> {{item}} </p> </div> <script> new Vue({ el: '#app', data: { nums: [10, 20, 30, 40, 50], user: {name: '娇娇', age: 18}, name: '小明', num: 4 } }) </script><!--元素的渲染--> <div id="app"> <ul> <li v-for="num in nums"> <p v-text="num"></p> </li> </ul> </div> <script> let app = new Vue({ el: '#app', data: { nums: [10, 20, 30, 40, 50], } }) </script> -
增强数组更新的方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新
-
push()向数组的末尾添加一个或更多元素
-
pop()删除并返回数组的最后一个元素
-
shift()数组的第一个元素从其中删除
-
unshift()向数组的开头添加一个或更多元素
-
splice()向/从数组中添加/删除
-
sort()对数组的元素进行排序
-
reverse()颠倒数组中元素的顺序
注意: 通过数组下标来修改或者添加是无效的，页面不会重新渲染，即使数据已经改变了。
app.numbs.push(6) # 其它方法跟js的数组操作方法一样 -
-
关于设置key
使用
v-for更新已渲染的元素列表时,默认使用复用策略;当列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;<div id="app"> <ul> <!-- 注意: 1> 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的 2> key属性尽量使用number或string 3> key在使用时，必须v-bind绑定 --> <li v-for="(shop,index) in shops" :key="shop.id" > <p v-text="index + shop.name"></p> </li> </ul> </div> <script> let app = new Vue({ el: '#app', data: { shops: [ { id: 1, name: "Apple iPhone XS Max" }, { id: 2, name: "小米8" }, ] } })
7、v-if
-
说明
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素 -
语法格式
v-if="expression" v-else-if="expression" v-else -
参数说明
-
expression
是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式
-
-
示例代码
<div id="app"> <!--登录成功后显示--> <div v-if="isLogin"> <p v-text="user.name"></p> </div> <!--未登录显示--> <div v-else> <a href="#">登录</a> <a href="#">注册</a> </div> </div> <script> let app = new Vue({ el: "#app", data: { isLogin: false, user: { name: 'vue' }, } }) </script> <!-- 在控制台可以输入 app.isLogin=true -->
8、v-show
-
说明
与v-if语句一样都是简单的理解都是用来做显示隐藏元素,
vue-show通过标签display属性设置为none，控制隐藏,
v-if动态的向DOM树内添加或者删除DOM元素
-
语法格式
v-show="expression" -
参数说明
是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式
-
示例代码
<div id="app"> <h1 v-show="ok">条件为TRUE，输出</h1> <h1 v-show="error">条件为false，不输出</h1> <h1 v-show="10>5">10大于5，输出!</h1> <h1 v-show="2>10">不大于10，不输出!</h1> </div> <script> new Vue({ el: '#app', data: { ok: true, error: false } }) </script> -
区别
1、实现本质方法区别
- vue-show本质就是标签display设置为none，控制隐藏
- vue-if是动态的向DOM树内添加或者删除DOM元素
2、编译的区别
- v-show其实就是在控制css
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
3、编译的条件
- v-show都会编译，初始值为false，只是将display设为none，
- v-if初始值为false，就不会编译了
4、性能
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
