One, template syntax
1. Understanding of the template:
The dynamic html page contains some JS syntax codes, brace expressions, instructions (custom tag attributes starting with v-).
2. Double curly brace expressions
Syntax: {
{exp}} or {
{
{exp}}}
Function: To output data to the page, you can call the method of the object
<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. Command 1: Mandatory data binding
Function: Specify the changed attribute value
Full writing: v-bind:xxx='yyy' //yyy will be executed as an expression analysis.
Concise writing: :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. Instruction 2: Binding event monitoring
Function: Bind the callback function of the specified event name
Full writing: v-on:click='xxx'
Concise writing: @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)
}
},
});
2. Calculating attributes and monitoring
1. Calculated properties
Define the method of calculating the attribute in the calculated attribute object and
use {
{方法名}}it on the page to display the result of the calculation
<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. Monitoring properties
Monitor the specified attributes through the $watch()or watchconfiguration of the vm object.
When the attributes change, the callback function is automatically called and the calculation is performed inside the function
watch:{
firstName:function(value){
//当firstName发生变化的值就是value
this.fullName2=value+" "+this.lastName;//this就是vm
},
lastName:function(value){
this.fullName2=this.firstName+" "+value;
}
}
Or use $watch()to monitor the change of lastName
vm.$watch('lastName',function(value){
this.fullName2=this.firstName+' '+value
})
3. Advanced calculation properties
By getter/setterrealizing the display and monitoring of the attribute data, the
calculated attribute is cached, and the getter calculation is performed only once after multiple reads. The
set monitors the change of the current attribute value.
fullName3:{
//回调函数(定义了，未调用，最终还是执行了)
get(){
//需要读取当前的属性值时回调执行，计算并返回当前属性的值
return this.firstName+' '+this.lastName
},
set(value){
//回调函数：当属性值发生改变时回调，更新相关的属性数据
//value就是fullname3的最新属性值
const name=value.split(' ')
this.firstName=name[0]
this.lastName=name[1]
}
},
Three, class and style
1. Understand
In the application interface, the style of a certain element(s) is changed. The
class/style binding is a technology specifically used to achieve dynamic style effects.
2. Class binding: :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 is a string: directly pass the class name
xxx is the object: class name: boolean
xxx is an array: multiple class names are put into the array, showing different effects
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 binding
style="{ color: activeColor, fontSize: fontSize +'px' }"
where activeColor/fontSize is the data attribute
<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
},
Three, conditional rendering
1. Conditional rendering instructions
v-if
v-else
v-show
2. Compare v-if and v-show
If you need to switch v-show frequently, it's better
<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>
Fourth, the list rendering
1. List display
Array: v-for / index
Object: v-for / key
2. When traversing objects
(1) The case of three values:
v-for="(value, name, index) in object ：key="key"
after the key, it means the serial number, the first position means the attribute value, and the second position is the attribute name
(2) The case of two values: the
v-for="(value, key) in object ：key="key"
first position represents the attribute value, and the second position represents the attribute name
<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. When traversing the array
v-for="(p, index) in person" :key="index"
After the key, it means the serial number, and p means the array
<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>