模板语法
一.v-sth用法
1. v-once
在某些情况下，我们可能不希望界面随意的跟随改变(该指令后面不需要跟任何表达式)
<div id="div1">
<h2>{{message}}</h2>
<h2 v-once>{{message}},你好啊</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#div1",
data:{
message:"你好啊"
}
})
</script>
这样，当我们在浏览器开发者模式下(console)输入app.message="哈哈"，只会改变第一个h2中的值
2. v-html
将字符串渲染为标签
<div id="div1">
<h2 v-html="link"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#div1",
data:{
link:'<a href="http://www.baidu.com">百度</a>'
}
})
</script>
3. v-pre
v-pre用来显示原来的Mustache语法
<div id="div1">
<h2>{{message}}</h2> <!---用来显示你好啊--->
<h2 v-pre>{{message}}</h2> <!---用来显示{{message}}--->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#div1",
data:{
message:"你好啊",
}
})
</script>
4. v-cloak
在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="div1">
<h2 v-cloak>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(function () {
const app = new Vue({
el:"#div1",
data:{
message:"你好啊"
}
})
},1000);
</script>
</body>
前1s，不会显示，后1s，开始显示
5. v-show
v-show和v-if相似，也用于决定一个元素是否渲染
- v-if当条件为false时，不会有对应的元素在dom中
- v-show当条件为false时，仅仅将元素的display属性设置为none
<div id="div1">
<h2 v-show="isShow">你好啊啊</h2>
<button @click="isShow=!isShow">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#div1",
data:{
isShow:true
}
})
</script>
6. v-for
v-for遍历对象
<div id="div1">
<ul>
<li v-for="item in info">{{item}}</li> <!---for循环直接得到值--->
</ul>
<ul>
<li v-for="(item,key) in info">{{key}}-{{item}}</li> <!---(值,键) in 对象--->
</ul>
<!---(值,键,下标) in 对象--->
<ul>
<li v-for="(item,key,index) in info">{{index}}-{{key}}-{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#div1",
data:{
info:{
name:"kobe",
age:"19",
height:199,
}
}
})
</script>
7.v-model
在react中是单向数据绑定，而Vue.js 最显著的特点就是响应式和数据驱动，也就是将Model和View进行单向绑定或者双向绑定。只有data-->DOM，没有DOM-->data
单向绑定：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。
双向绑定：把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。
v-model主要用在表单的input输入框，完成视图(view)和数据(model)的双向绑定。
v-model只能用在"input、select、textarea"这些表单元素上。有了v-model就不用要name属性了
<body>
<form id="vm" action="#">
<p><input v-model="email"></p>
<p><input v-model="name"></p>
{{email}}
{{name}}
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data: {
email: '', //动态改变此值，input中使用了v-model，{{email}}也会相应改变
name: ''
}
});
</script>
v-model只能绑定字符串
<el-form-item label="类别" :label-width="formLabelWidth">
<el-select v-model="category_name" placeholder="请选择主机类别">
<el-option v-for="(item,index) in form.category_list" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
#如上，select绑定某个字符串，option绑定列表，选中之后category_name作为键，选中的value作为值传给js
二. v-bind绑定class
对象语法的含义是:class后面跟的是一个对象。
在开发中，有哪些属性需要动态进行绑定呢？
还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
1.动态绑定class的对象语法
- 直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
- 可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
-
和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
-
如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: rebeccapurple;
}
</style>
</head>
<body>
<div id="div1">
<h2 :class="{active:isActive,line:isLine}">你好啊</h2>
<h2 :class="getsth()">你好啊</h2> <!---如果嫌上面语句太长，可用此种方式--->
<button v-on:click="ce">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#div1",
data:{
active:"active",
isActive:true,
isLine:true,
},
methods:{
ce:function () {
this.isActive=!this.isActive;
},
getsth:function () {
return {active:this.isActive,line:this.isLine}
}
}
})
</script>
2.动态绑定class的数组语法
数组语法的含义是:class后面跟的是一个数组。
- 直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
- 也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
-
和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
-
如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
<div id="div1">
<h2 :class="[active,line]">你好啊</h2>
<h2 :class="get_cls()"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#div1",
data:{
active:'aaa',
line:"bbb",
},
methods:{
get_cls:function () {
return [this.active,this.line]
}
}
})
</script>
三.动态绑定style
- 我们可以利用v-bind:style来绑定一些CSS内联样式。
- 在写CSS属性名的时候，比如font-size
- 我们可以使用驼峰式 (camelCase) fontSize
- 或短横线分隔 (kebab-case) ‘
1.对象语法
<div id="div1">
<h2 :style="{fontSize:fontSize,color:fontColor}">你好啊</h2>
<h2 :style="getStyle()">你好啊</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#div1",
data:{
fontSize:100+'px',
fontColor:"red",
},
methods:{
getStyle:function () {
return {fontSize:this.fontSize,color:this.fontColor}
}
}
})
</script>
2.数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
