Uno, sintaxis de plantilla
1. Comprensión de la plantilla:
La página HTML dinámica contiene algunos códigos de sintaxis JS, expresiones de llaves, instrucciones (atributos de etiquetas personalizados que comienzan con v-).
2. Expresiones de llaves dobles
Sintaxis: {
{exp}} o {
{
{exp}}}
Función: para enviar datos a la página, puede llamar al método del objeto
<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. Comando 1: Enlace de datos obligatorio
Función: especifique el valor del atributo modificado
Escritura completa: v-bind: xxx = 'yyy' // yyy se ejecutará como un análisis de expresión.
Escritura concisa:: 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. Instrucción 2: Supervisión de eventos vinculantes
Función: vincular la función de devolución de llamada del nombre de evento especificado
Escritura completa: v-on: click = 'xxx'
Escritura concisa: @ 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. Cálculo de atributos y seguimiento
1. Propiedades calculadas
Defina el método para calcular el atributo en el objeto de atributo calculado y
utilícelo en la página {
{方法名}}para mostrar el resultado del cálculo.
<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. Supervisión de las propiedades
Monitoree los atributos especificados a través de la configuración $watch()o watchdel objeto vm.
Cuando los atributos cambian, la función de devolución de llamada se llama automáticamente y el cálculo se realiza dentro de la función
watch:{
firstName:function(value){
//当firstName发生变化的值就是value
this.fullName2=value+" "+this.lastName;//this就是vm
},
lastName:function(value){
this.fullName2=this.firstName+" "+value;
}
}
O use $watch()para monitorear el cambio de apellido
vm.$watch('lastName',function(value){
this.fullName2=this.firstName+' '+value
})
3. Propiedades de cálculo avanzadas
Al getter/setterrealizar la visualización y el seguimiento de los datos del atributo, el
atributo calculado se almacena en caché y el cálculo del getter se ejecuta sólo una vez después de múltiples lecturas El
conjunto supervisa el cambio del valor del atributo actual.
fullName3:{
//回调函数(定义了，未调用，最终还是执行了)
get(){
//需要读取当前的属性值时回调执行，计算并返回当前属性的值
return this.firstName+' '+this.lastName
},
set(value){
//回调函数：当属性值发生改变时回调，更新相关的属性数据
//value就是fullname3的最新属性值
const name=value.split(' ')
this.firstName=name[0]
this.lastName=name[1]
}
},
Tres, clase y estilo
1. Comprender
En la interfaz de la aplicación, se cambia el estilo de ciertos elementos. El
enlace de clase / estilo es una tecnología que se utiliza específicamente para lograr efectos de estilo dinámicos.
2. Enlace de clase:: 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 es una cadena: pasa directamente el nombre de la clase
xxx es el objeto: nombre de clase: booleano
xxx es una matriz: se colocan varios nombres de clase en la matriz, mostrando diferentes efectos
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. encuadernación de estilo
style = "{color: activeColor, fontSize: fontSize + 'px'}"
donde activeColor / fontSize es el atributo de datos
<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
},
Tres, representación condicional
1. Instrucciones de renderizado condicional
v-if
v-else
v-show
2. Compare v-if y v-show
Si necesita cambiar de v-show con frecuencia, es mejor
<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>
Cuarto, la representación de la lista
1. Visualización de lista
Matriz: v-for / index
Objeto: v-for / key
2. Al atravesar objetos
(1) El caso de tres valores:
v-for="(value, name, index) in object ：key="key"
después de la clave, significa el número de serie, la primera posición significa el valor del atributo y la segunda posición es el nombre del atributo
(2) El caso de dos valores: la
v-for="(value, key) in object ：key="key"
primera posición representa el valor del atributo y la segunda posición representa el nombre del atributo
<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. Al atravesar la matriz
v-for="(p, index) in person" :key="index"
Después de la clave, significa el número de serie y p significa la matriz
<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>