一、模板语法
1. 模板的理解:
动态的html页面，包含了一些JS语法代码，大括号表达式，指令(以v-开头的自定义标签属性)。
2. 双大括号表达式
语法: {
{exp}} 或 {
{
{exp}}}
功能: 向页面输出数据， 可以调用对象的方法
<div id="app">
<p>双大括号表达式</p>
<p>{
{
msg}}</p>
<p>{
{
msg.toUpperCase()}}</p><!--大写-->
</div>
<script type="text/javascript">
const vm=new Vue({
el:"#app",
data:{
msg:'hello world!',
}
});
</script>
v-text v-html
<p>{
{
msg}}</p> <!--textContent-->
<p v-text="msg"></p> <!--textContent-->
<p v-html="msg"></p> <!--innerHTML-->
3. 指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法: v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行
简洁写法: :xxx=‘yyy’
<a href="url">访问指定网站</a><br> <!--并不会显示，报错-->
<a v-bind:href="url">bind强制跳转</a><br><!--跳转百度-->
<a :href="url">简洁写法</a><br><!--简洁写法-->
<script type="text/javascript">
const vm=new Vue({
el:"#app",
data:{
url:'https://www.baidu.com/'
}
});
</script>
4. 指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:v-on:click=‘xxx’
简洁写法: @click=‘xxx’
<button v-on:Click="test">点我</button>
<button @click="test('你好')">再点我</button>
const vm=new Vue({
el:"#app",
data:{
url:'https://www.baidu.com/'
},
methods: {
test(a){
alert(a)
}
},
});
二、计算属性和监视
1. 计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{
{方法名}}来显示计算的结果
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
</div>
<script>
const vm=new Vue({
el:"#demo",
data:{
firstName:"",
lastName:"",
},
computed:{
//初始化时会执行一次，相关的data值发生变化时也会执行
fullName1(){
//计算属性的一个,方法的返回值作为属性值
console.log("fullName1()");
return this.firstName+" "+this.lastName;
}
}
});
</script>
2. 监视属性
通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
watch:{
firstName:function(value){
//当firstName发生变化的值就是value
this.fullName2=value+" "+this.lastName;//this就是vm
},
lastName:function(value){
this.fullName2=this.firstName+" "+value;
}
}
或者使用$watch()来监视lastName的变化
vm.$watch('lastName',function(value){
this.fullName2=this.firstName+' '+value
})
3. 计算属性高级
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算
set监视当前属性值的变化
fullName3:{
//回调函数(定义了，未调用，最终还是执行了)
get(){
//需要读取当前的属性值时回调执行，计算并返回当前属性的值
return this.firstName+' '+this.lastName
},
set(value){
//回调函数：当属性值发生改变时回调，更新相关的属性数据
//value就是fullname3的最新属性值
const name=value.split(' ')
this.firstName=name[0]
this.lastName=name[1]
}
},
三、class和style
1. 理解
在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class=‘xxx’
<style>
.aClass{
color: red;
}
.bClass{
color: seagreen;
}
.cClass{
font-size: 30px;
}
</style>
<div id="app">
<h2>1. class绑定: :class='xxx'</h2>
<p :class="myClass">xxx是字符串</p>
<p :class="{aClass:isA,bClass:isB}">xxx是对象</p>
<p :class="['bClass','cClass']">xxx是数组</p>
<button v-on:Click="test">点我</button>
<button @click="test2">再点我</button>
</div>
xxx是字符串：直接传类名
xxx是对象：类名：布尔值
xxx是数组：多个类名放入数组，呈现不同的效果
const vm=new Vue({
el:"#app",
data:{
myClass:'aClass',//红色
isA:true,
isB:false,
},
methods: {
test(){
//点击变绿色
this.myClass='bClass'
},
test2(){
//点击红变绿、绿变红
this.isA=!this.isA;
this.isB=!this.isB;
}
},
});
3. style绑定
style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
其中activeColor/fontSize是data属性
<h2>2. style绑定</h2>
<p :style="{color: activeColor, fontSize: fontSize + 'px' }">style变样式</p>
data:{
activeColor:'red',
fontSize:20,
},
methods: {
test(){
this.activeColor='green'
this.fontSize=30
},
三、条件渲染
1. 条件渲染指令
v-if
v-else
v-show
2. 比较v-if与v-show
如果需要频繁切换 v-show 较好
<body>
<div id="app">
<p v-if="ok">成功</p>
<p v-else>失败</p>
<p v-show="ok">表白成功</p>
<p v-show="!ok">表白失败</p>
<button @Click="ok=!ok">点我</button>
</div>
<script>
const vm=new Vue({
el:"#app",
data:{
ok:true
}
})
</script>
</body>
四、列表渲染
1. 列表显示
数组: v-for / index
对象: v-for / key
2. 遍历对象时
（1） 三个值的情况：
v-for="(value, name, index) in object ：key="key"
key后表示序号，第一个位置表示属性值，第二个位置是属性名
（2）两个值的情况：
v-for="(value, key) in object ：key="key"
第一个位置表示属性值，第二个位置表示属性名
<h2>测试v-for遍历对象</h2>
<ul>
<li v-for="(name,value,index) in person[1]" :key="index">
{
{
index}}--{
{
value}}---{
{
name}}
</li>
</ul>
<li v-for="(value,key) in person[1]" :key="key">
{
{
key}}-----{
{
value}}
</li>
3.遍历数组时
v-for="(p, index) in person" :key="index"
key后表示序号，p表示数组
<body>
<div id="app">
<h2>测试v-for遍历数组</h2>
<ul>
<li v-for="(p, index) in person" :key="index">
{
{
index}}---{
{
p.name}}---{
{
p.age}}
---<button @click="deleteP(index)">删除</button>
---<button @click="updateP(index,{name:'cat',age:6})">更新</button>
</li>
</ul>
</div>
<script>
//vue本身只是监视了person的改变，没有监视数组内部数据的改变
//vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）
const vm= new Vue({
el:"#app",
data:{
person:[
{
name:"aaa",age:18},
{
name:"bbb",age:19},
{
name:"ccc",age:20},
{
name:"ddd",age:21}
]
},
methods: {
deleteP(index){
//删除person中指定index的p
this.person.splice(index,1);// 调用了不是原生数组的splice(), 而是一个变异(重写)方法
// 1. 调用原生的数组的对应方法
// 2. 更新界面
},
updateP(index,newP){
//并没有改变person本身，数组内部发生了变化，但是没有调用变异方法，vue不会发生改变更新
//this.person[index]=newP;
this.person.splice(index,1,newP);
}
},
})
</script>
</body>