Um, sintaxe de modelo
1. Compreensão do modelo:
A página html dinâmica contém alguns códigos de sintaxe JS, expressões de chaves, instruções (atributos de tag personalizada começando com v-).
2. Expressões de chaves duplas
Sintaxe: {
{exp}} ou {
{
{exp}}}
Função: Para enviar dados para a página, você pode chamar o método do 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: vinculação de dados obrigatória
Função: Especifique o valor do atributo alterado
Escrita completa: v-bind: xxx = 'yyy' // yyy será executada como uma análise de expressão.
Escrita 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. Instrução 2: Monitoramento de evento de ligação
Função: vincula a função de retorno de chamada do nome do evento especificado
Escrita completa: v-on: click = 'xxx'
Escrita 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 e monitoramento
1. Propriedades calculadas
Defina o método de cálculo do atributo no objeto de atributo calculado e
use {
{方法名}}
-o na página para exibir o resultado do 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. Propriedades de monitoramento
Monitore os atributos especificados por meio da configuração $watch()
ou watch
do objeto vm.
Quando os atributos mudam, a função de retorno de chamada é automaticamente chamada e o cálculo é executado dentro da função
watch:{
firstName:function(value){
//当firstName发生变化的值就是value
this.fullName2=value+" "+this.lastName;//this就是vm
},
lastName:function(value){
this.fullName2=this.firstName+" "+value;
}
}
Ou use $watch()
para monitorar a mudança de sobrenome
vm.$watch('lastName',function(value){
this.fullName2=this.firstName+' '+value
})
3. Propriedades de cálculo avançadas
Ao getter/setter
realizar a exibição e o monitoramento dos dados do atributo, o
atributo calculado é armazenado em cache e o cálculo do getter é executado apenas uma vez após várias leituras. O
conjunto monitora a alteração do valor do atributo atual.
fullName3:{
//回调函数(定义了,未调用,最终还是执行了)
get(){
//需要读取当前的属性值时回调执行,计算并返回当前属性的值
return this.firstName+' '+this.lastName
},
set(value){
//回调函数:当属性值发生改变时回调,更新相关的属性数据
//value就是fullname3的最新属性值
const name=value.split(' ')
this.firstName=name[0]
this.lastName=name[1]
}
},
Três, classe e estilo
1. Entenda
Na interface do aplicativo, o estilo de um determinado (s) elemento (s) é alterado. A
associação de classe / estilo é uma tecnologia usada especificamente para obter efeitos de estilo dinâmico.
2. Vinculação de classe:: 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 é uma string: passe diretamente o nome da classe
xxx é o objeto: nome da classe: booleano
xxx é uma matriz: vários nomes de classes são colocados na matriz, mostrando diferentes efeitos
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. encadernação de estilo
style = "{color: activeColor, fontSize: fontSize + 'px'}"
onde activeColor / fontSize é o atributo de dados
<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
},
Três, renderização condicional
1. Instruções de renderização condicional
v-if
v-else
v-show
2. Compare v-if e v-show
Se você precisa mudar de v-show com frequência, é melhor
<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>
Quarto, a renderização da lista
1. Exibição da lista
Matriz: v-for / index
Objeto: v-for / key
2. Ao atravessar objetos
(1) O caso de três valores:
v-for="(value, name, index) in object :key="key"
após a chave, significa o número de série, a primeira posição significa o valor do atributo e a segunda posição é o nome do atributo
(2) O caso de dois valores: a
v-for="(value, key) in object :key="key"
primeira posição representa o valor do atributo e a segunda posição representa o nome do 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. Ao percorrer a matriz
v-for="(p, index) in person" :key="index"
Após a chave, significa o número de série e p significa a 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>