一、模板语法
Vue模板语法实现前端渲染,前端渲染即把数据填充到html标签中。
数据(来自服务器)+模板(html标签)=前端渲染(产物是静态html内容)
二、插值
1. 文本插值
用双大括号插入文本,数据可变,解释为普通文本
<div id="app">
<!-- 会与实例中的【data】中的属性绑定在一起,并且数据实现同步-->
<h1>{{message}}</h1>
</div></body>
<script>
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
el: "#app",
// data模型数据,值是一个对象。
data: {
message: "I LOVE YOU"
}
})
</script>
用v-once指令插值,数据无法变化
<body>
<div id="app">
<!-- v-once只编译一次。显式内容之后不再具有响应式功能。 -->
<!-- v-once的应用场景,如果显式的信息后续不需要再修改,可以使用v-once指令,可以可以提高性能,因为Vue就不需要去监听它的变化了。 -->
<h1 v-once>{{message}}</h1>
</div></body>
<script>
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
el: "#app",
// data模型数据,值是一个对象。
data: {
message: "I LOVE YOU"
}
})
</script>
2. HTML插值
v-html,将数据解释为HTML代码
<body>
<div id="app">
<!-- 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译,在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击 -->
<h1 v-html="msg"></h1>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "<span style='color:blue'>BLUE</span>"//可以使用v-html标签展示html代码。
}
})
</script>
翻译后的HTML代码
3. 属性插值
v-bind指令,可以缩写成:
- 可以动态绑定在src、href上
<body>
<div id="app">
<!--若无v-bind,则imgUrl就不会经过data的中转,而是直接翻译为imgUrl-->
<img v-bind:src="imgUrl" alt=""/>
<a :href="searchUrl">百度一下</a>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
imgUrl:'https://img-blog.csdnimg.cn/aff28bae46f3435788ec46333a74e1dc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aWl5aaZ5peg56m5,size_20,color_FFFFFF,t_70,g_se,x_16',
searchUrl:'http://www.baidu.com'
}
})
</script>
- 绑定class、style
<body>
<div id="app">
<!--通过:class更新的类名和本身存在的类可以共存-->
<p :class="{fontCol:isName,setBack:!isAge}" class="weight">{{name}}</p>
<i :class="addClass">{{name}}真好看!</i>
</div>
<script>
var vm = new Vue({
el:"#app",
// 条件比较少
data:{
isName:false,
isAge:false,
name:"功守道"
},
// 当v-bind:class的表达式过长或者逻辑复杂(一般当条件多于两个的时候),可以考虑采用计算属性,返回一个对象
computed:{
addClass:function(){
return {
checked:this.isName&&!this.isAge
}
}
}
})
</script>
</body>
翻译后
<body>
<div id="app">
<!--这样子写长样式不方便,故一般写在data中-->
<div :style="{'color': color,'fontSize':fontSize + 'px'}">修饰文本</div>
</div>
<script>
var vm= new Vue({
el: "#app",
data: {
color: 'red',
fontSize: 24
}
})
</script>
</body>
把样式放在data中
<body>
<div id="app">
<div :style="styles">修饰文本</div>
</div>
<script>
var vm= new Vue({
el: "#app",
data: {
styles: {
color: 'red',
fontSize: 14+'px'
}
}
})
</script>
</body>
- 绑定多个style
<body>
<div id="app">
<!--绑定多个样式,最终会将多个样式结合起来-->
<div :style="[styleA,styleB]">文本</div>
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
styleA:{
color: 'red',
fontSize: 24 + 'px'
},
styleB: {
width: 100 + 'px',
border: 1 + 'px ' + 'black ' + 'solid'
}
}
})
</script>
</body>
4. 插值中使用JavaScript表达式
注意使用的是表达式,而不是语句
语句:{{ var a=1 }}
表达式:{{ number+1 }}
<body>
<div id="app">
<p>{{ number + 1 }}</p>
<hr>
<p>{{msg + '~~~~~'}}</p>
<hr>
<p>{{flag ? '条件为真' : '条件为假'}}</p>
<hr>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'Hello beixi!',
flag:true,
number:2
}
})
</script>
</body>
翻译后
三、指令
- 参数
例如:v-bind:href=“url”
v-bind是指令,href是参数,“url”是数据 - 动态参数
例如:v-bind:[attributeName]=‘url’
若data中存在属性attributeName,其值为‘href’,则原式等价于v-bind:href - 修饰符
以“.”指明的特殊后缀
v-on:submit.prevent=“onSubmit”
.prevent即修饰符,此修饰符告诉v-on指令对于触发的事件调用event.preventDefault()