模板语法： js业务逻辑script ，结合模板template
template中{{msg}}
script中 data(){ return{ msg:"传递的数据", msg2:"<h4>h2样式</h4>" } },
template中<p v-html="msg2"></p>
script中 data(){ return{ msg:"传递的数据", msg2:"<h4>h2样式</h4>" } },
template中<div v-bind:class="activate">hello</div>
script中 data(){ return{ activate:'active' } },
在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
有个限制就是，每个绑定都只能包含单个表达式
template中：
<p v-if="flag2">HelloWorld</p>
<p v-if="flag2">HelloWorld</p>
script中：
data(){
return{
flag1:true,
flag2:false,
}
},
template中
<p v-if="flag1">条件1</p>
<p v-else>条件2</p>
script中
data(){
return{
flag1:true,
}
},
条件组
template中
<template v-if="flag1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</template>
script中
data(){
return{
flag1:true,
}
},
v-show
template中:
<div>
<h3>条件渲染</h3>
<div v-show="flag1">aaa</div>
</div>
script中:
data(){
return{
flag1:true,
}
},
template中
<div>
<h3>条件渲染</h3>
<div v-show="flag1">aaa</div>
</div>
script中
data(){
return{
flag1:false,
}
},
区别
v-for
template中
<div>
<h3>列表渲染</h3>
<ul>
<li v-for="item in result" :key="item.id">{{item.name}}</li>
</ul>
</div>
script中
data(){
return{
result:[
{
id:1001,
name:"小红"
},
{
id:1002,
name:"小明"
},
{
id:1003,
name:"小军"
},
{
id:1004,
name:"小杨"
}
]
}
},
使用index
template中
<div>
<h3>列表渲染</h3>
<ul>
<li v-for="(item,index) in result" :key="index">{{item.name}}+{{index}}</li>
</ul>
</div>
script中
data(){
return{
result:[
{
id:1001,
name:"小红"
},
{
id:1002,
name:"小明"
},
{
id:1003,
name:"小军"
},
{
id:1004,
name:"小杨"
}
]
}
},
v-on
template中：
<div>
<h3>事件处理</h3>
<button v-on:click="clickhendke">第一个按钮</button>
</div>
script中：
methods承载事件函数
export default {
name: 'App',
data(){
return{
}
},
methods: {
clickhendke(){
console.log("hello");
}
},
components: {
HelloWorld
}
}
v-on:click结合v-if完成文字的显示和隐藏
template中
<div>
<h3>事件处理</h3>
<h4 v-if="flag">你好呀！！！！！！！</h4>
<button v-on:click="clickhendke">第一个按钮</button>
</div>
script中
export default {
name: 'App',
data(){
return{
flag:true,
}
},
methods: {
clickhendke(){
this.flag=!(this.flag)
}
},
components: {
HelloWorld
}
}
所有data的属性可以直接用this来索引和修改。。。
事件传递参数：
template中
<div>
<h3>列表渲染+事件处理</h3>
<ul>
<li @click="clickhendle(item.text)" v-for="(item,index) in result" :key="index">{{item.name}}+{{index}}</li>
</ul>
</div>
script中
export default {
name: 'App',
data(){
return{
result:[
{
id:1001,
name:"小红",
text:"爱打球"
},
{
id:1002,
name:"小明",
text:"爱打牌"
},
{
id:1003,
name:"小军",
text:"爱打麻将"
},
{
id:1004,
name:"小杨",
text:"爱弹琴"
}
]
}
},
methods: {
clickhendle(data){
console.log(data);
}
},
components: {
HelloWorld
}
}
也可以使用event对象
methods: {
clickhendle(e){
console.log(e);
}
},
template中
<div>
<h3>表单输入和绑定</h3>
<input type="text" v-model="username">
<p>输入的数据为：{{username}}</p>
<button @click="clickhendle">获取输入数据</button>
</div>
script中
export default {
name: 'App',
data(){
return{
username:"",
}
},
methods: {
clickhendle(){
console.log(this.username)
}
},
components: {
HelloWorld
}
}
回车或者失去焦点后，页面才能读取到输入的数据
在template中
<input type="text" v-model.lazy="username">
template中
<div>
<h3>计算属性和监听器</h3>
<p>{{message}}</p>
<p>{{myMessage}}</p>
</div>
script中
添加computed：
export default {
name: 'App',
data(){
return{
message : "hello",
message2 :"aa"
}
},
methods: {
clickhendle(){
}
},
computed: {
myMessage(){
this.message2 =this.message.length
return this.message2;
}
},
components: {
HelloWorld
}
}
template中
<div>
<input type="text" v-model="nick">
</div>
script中
添加watch
export default {
name: 'App',
data(){
return{
nick:"初始值",
}
},
methods: {
clickhendle(){
}
},
computed: {
myMessage(){
}
},
watch: {
nick(oldvalue,newvalue){
console.log(oldvalue+"---------"+newvalue)
}
},
components: {
HelloWorld
}
}
temple中
<div>
<p :class="{'active': true}">HelloWorld</p>
<p :class="['a1','a2','a3']">HelloWorld</p>
</div>
vue+回车快捷键生成模板：
唯一根元素：div
