如果阅读有疑问的话,欢迎评论或私信!!
本人会很热心的阐述自己的想法!谢谢!!!
文章目录
- 模板语法
- 前言
- 文本插值
- 原始HTML
- 属性Attribute绑定
- 动态绑定多个值
模板语法
前言
Vue 使用一种基于 HTML 的模板语法,Vue的所有语法都是合法的HTML代码,都可以被浏览器正常解析。并且在使用Vue提供的模板时,Vue底层还会提供编译优化,使用最少的渲染速度。
文本插值
Vue语法中通过双大括号
对页面中指定位置
渲染数据,并且数据是响应式数据。例如前面代码中:
<div id="app">{{ message }}</div>
原始HTML
上面通过双大括号插入的值是纯文本形式
,若想添加HTML代码,可以通过v-html指令。例如:
<template><h1>练习</h1><p>这是html代码:{{ htmlDisplay }}</p><p><span v-html="htmlDisplay"></span></p>
</template><script>export default{data(){var htmlDisplay = "<h2>这里是使用v-html渲染的结果</h2>";var imgSrc = "/src/components/icons/newImg.gif"return {htmlDisplay,imgSrc}}}
</script>
注意:v-html属性所在标签中不可有任何内容,否则将会报错:v-html will override element children.例如:
<p><span v-html="htmlDisplay"><a href=""></a></span> </p>
其中a标签引起的控制台错误!
属性Attribute绑定
Vue中使用v-bind绑定属性值,即标签的src、id、class等属性。该属性由于过于常用,Vue还设置了语法糖:id
的形式,根据文档可以看出应该注意两个点:
对于v-bind绑定
数字或者字符串
等数据时,当值为null
或者undefined
时,该属性将会被忽略。<template><img :src="imgSrc" > </template><script>export default{data(){var imgSrc = "/src/components/icons/newImg.gif";//正常显示var imgSrcNull = null;//元素标签中不存在src属性var imgSrcUndefined = undefined;//元素标签中不存在src属性var imgSrcEmpty = ""; //src(unknow)return {imgSrc,imgSrcNull,imgSrcUndefined,imgSrcEmpty}}} </script>
对于v-bind绑定
布尔值
时,只有值为假值时,才会等于false,而真值
和空字符串
时均为真值
。<template><button :disabled = disableEmpty>123</button> </template><script>export default{data(){var disableEmpty = "";//按钮中存在disabled属性,并且按钮无法选中return {disableEmpty}}} </script>
动态绑定多个值
绑定多个值时,也需要使用v-bind属性,和绑定单个值有一点不同:
不再需要设置引号
右边的属性名
以及:
,直接在对象中设置
<template><h1 v-bind=objAttr>练习</h1>
</template><script>export default{data(){var objAttr = {id:123,class:"a"} //h1标签中id为123,class属性为areturn {objAttr}}}
</script>