<!-- mustache语法中不仅可以直接写变量,也可以写简单的表达式-->
<div id=' app '>
<h2>{{name}}</h2>
<h2>{{firstName + ‘ ’ + lastName}}</h2>
<h2>{{firstName }} {{ lastName}}</h2>
</div>
<script>
const app = new Vue({
el:'#app'
data:{
name : 'Kobe Bryant',
firstName : 'Kobe',
lastName : 'Bryant'
}
})
</script>
<div id='app'>
<h2>{{name}}</h2>
</div>
<script>
const app = new Vue({
el:'#app'
data:{
firstName : 'Kobe',
lastName : 'Bryant'
},
computed:{
name:function(){
return this.firstName+' '+this.lastName
}
}
})
</script>
每个计算属性都有getter和setter,通常情况下只需要getter来读取,但在某些情况下,也可以提供一个setter来设置(和Java中的JavaBean类似)。
//计算属性的完整写法
//一般没有set方法,只读属性
computed:{
name:{
set: function(){},
get: function(){
return this.firstName+' '+this.lastName
}
}
}
methods的结果不会被缓存,而计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。所以,当该结果频繁使用时,使用计算属性具有更高的效率。
B站教程链接
方法 | 作用 |
---|---|
push() | 在数组尾添加元素 |
pop() | 删除数组中最后一个元素 |
shift() | 删除数组中第一个元素 |
unshift() | 在数组头添加元素 |
splice() | 删除元素、替换元素、添加元素 |
sort() | 排序数组 |
reverse() | 逆置数组 |
let arr=['a','b','c','d']
//删除元素:第二个元素传入需删除元素的个数(如果不传,则删除后面的所有元素)。
arr.splice(1,2)//删除从下标1开始的2个元素
//替换元素:第二个元素传入需替换元素的个数。
arr.splice(1, 3, 'e','f','g')//替换从下标1开始的3个元素
//添加元素:第二个参数传入0(代表删除0个元素)
arr.splice(1, 0, 'e','f','g')//从下标1开始添加的3个元素
B站教程:https://www.bilibili.com/video/av59594689?p=44
该指令表示元素或组件只渲染一次,不会随着数据的改变而改变。
<div id='app'>
<h2 v-once> {{name}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name: 'Bob'
}
})
</script>
该指令更新元素的 innerHTML,将字符串中的HTML代码渲染出来。
<div id='app'>
<h2 v-html='url'> </h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
url: '百度一下'
}
})
</script>
该指令作用与Mustache语法类似,都是用于将数据显示在界面中。
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
<!-- 注意:v-text会覆盖原来标签内的内容 -->
<!-- ”你好”将会被覆盖 -->
<span v-text="msg">你好</span>
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<!-- mustache语法不会被渲染,直接显示 -->
<span v-pre>{{ this will not be compiled }}</span>
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div id='app'>
<h2> {{str}} </h2>
<h2 v-cloak> {{str}} </h2>
</div>
<script>
//延时之后,渲染完成之前,{{str}}会以原形式存在,影响观感
//使用v-cloak后,{{str}}渲染完成之前不会出现
setTimeout(function({
const app = new Vue({
el:'#app',
data:{
str: '百度一下'
}
})
}),1000)
</script>
<div id='app'>
<img v-bind:src='url'></img>
<!-- v-bind语法糖,直接用“:”代替 -->
<img :src='url'></img>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
url: 'https://cn.vuejs.org/images/logo.png'
}
})
</script>
动态绑定class,可以是对像类型,也可以是数组类型。v-bind绑定的类和普通的类不会冲突,二者会合并在一起。如果表达式过于冗长,也可以写计算属性。
<style>
.active{
color:red;
}
.line{
font-size:16px;
}
.title{
font-family: cursive;
}
</style>
<div id='app'>
<!--格式: <h2 :class="{类名1:boolean,类名2:boolean}"></h2> -->
<h2 :class="{active:isActive}">绑定对象类型</h2>
<h2 :class="classArr">绑定数组类型</h2>
<button v-on:click="butClick">动态绑定class</button>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
isActive: true,
//数组里的类名若是不加引号,则会被认为是vue实例中的变量
classArr: ['active','line','title']
},
methods:{
btnClick:function(){
this.isActive = ! this.isActive
}
}
})
</script>
动态绑定style,可以是对像类型,也可以是数组类型。写CSS样式的时候,可以使用驼峰式,比如 font-size 可以写成 fontSize;也可以短横线分隔,如 ‘font-size’(记得加引号)。
<!--格式:{CSS属性名: value} 注意:value要加上引号,否则会被vue当成变量处理-->
<h2 :style="{fontSize: '20px'}"></h2>
为元素绑定事件监听。
<!--为按钮绑定一个点击事件监听-->
<button v-on:click="btnClick"></button>
<!--语法糖写法-->
<button @click="btnClick"></button>
调用事件监听方法时,不需传入参数时可以省略括号;需要传入参数且需要传入event时,用$event传入事件。
<div id="app">
<!--方法定义需要参数,但调用时不传参,不会报错,但是参数为undefined-->
<button @click="btnClick()">按钮1</button>
<!--方法定义需要参数,但调用时不传参且不加括号,vue会把event事件对象传入-->
<button @click="btnClick">按钮2</button>
<!--方法定义需要参数和事件对象,用$event传入事件对象-->
<button @click="btn3Click(2333,$event)">按钮3</button>
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
btnClick(param){
console.log(param)
},
btn3Click(param,event){
console.log(param,event)
}
}
})
</script>
v-on修饰符详细说明。
<div id="app">
<h2 v-if="true">此元素会被渲染</h2>
<h2 v-if="false">此元素不会被渲染</h2>
<h2 v-else>此元素会被渲染</h2>
</div>
v-show的作用和v-if类似,都可以决定一个元素是否显示在界面。
<div id="app">
<!--
包含v-if的元素不存在与DOM中;
包含v-show的元素存在DOM中,只是元素中多了display:none
-->
<h2 v-if="false">此元素不会被渲染</h2>
<h2 v-show="false">此元素不会被渲染</h2>
</div>
故当元素需要频繁切换显示和隐藏时,v-show的效率更高。
基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:
<!--遍历数组-->
<div v-for="item in items">
{{ item.text }}
</div>
<div v-for="(item, index) in items"></div>
<!--遍历对象-->
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:
<!--key中绑定index是没有用的,要保证key的唯一性-->
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
总结就是key的主要作用在于高效地更新虚拟DOM。
在表单控件或者组件上创建双向绑定。
<input type="text" v-model="message">
等同于:
<input type="text" :value="message" @input="message=$event.target.value">
<label><input type="radio" name="sex" value="男" v-model="sex">男</label>
<label><input type="radio" name="sex" value="女" v-model="sex">女</label>
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
</script>
官方教程:https://cn.vuejs.org/v2/guide/forms.html