本文介绍了Vue.js的模板语法，包括mustache语法的JS支持，类名和样式绑定的使用方法。深入探讨了JS的数据类型、表达式和运算符，以及Vue的指令特性如v-html、v-text和v-bind。同时，详细阐述了类名和样式的对象与数组形式绑定。
模板语法
mustache(双大括号) 语法中是支持写js的
- 用法有两种：
1.内容： 必须加 {{ js语法 }}
2.属性: 属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
给一个标签加一个自定义属性/已有属性
img中的src就是已有属性
<img src = "" />
//data-index就是自定义属性 ， web网页中建议我们使用data-形式来定义自定义属性
<img data-index = "0" />
思考： Vue现在想要在html中使用自己的属性，并且要和他的语法和数据结合？
怎么办呢？
分析： 如何我能够标识出哪一个属性是具有vue标志的那就好了,也就是属性前加 v
Vue给这种带v标识的属性，起了一个名字： 指令【 借鉴angular 】
研究它js的支持性
1.数据类型
市场上js的数据类型分类有两种？
- 第一种：
初始数据类型： number string null undefine boolean
引用数据类型: Object [ function array … ] - 第二种：
基础数据类型: number string boolean
特殊数据类型： null undefine
复杂数据类型； Object [ function array …]
输出语法:
console
alert
表达式 / 运算符
三元表达式
例子：
<body>
<div id="app">
<h3> mustache - 内容的用法 </h3>
<p> str: {{ msg }} </p>
<p> num: {{ num }}</p>
<p> bool: {{ bool }} </p>
<p> null: {{ nul }} </p>
<p> und: {{ und }} </p>
<p> function: {{ fn() }} </p>
<p> object: {{ people.name }} </p>
<p> arr: {{ arr[2] }} </p>
<!-- <p> console: {{ console.log('a') }} </p> -->
<p> {{ 5>3?5:3 }} </p>
<p> {{ 5>3 && 5 || 3 }} </p>
<p> {{ 2 + 2 }} </p>
<img v-bind:src="src" alt="">
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
/*
1. mustache 语法糖研究 {{}}
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js',
num: 100,
bool: true,
nul: null,
und: undefined,
src: 'https://www.baidu.com/img/bd_logo1.png',
fn() {
return 'fn'
},
people: {
name: 'zhangsan'
},
arr: [1, 2, 3, 4, 5]
}
})
console.log(vm)
</script>
</html>
页面输出：
总结：
null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的 挂载在window身上的全局属性，我们都不能用的： 比如; console alert
{{ }} 不写流程控制
for
if
while
do…while
{{}} 支持三元表达式，同样也支持运算符
短路原则也是支持的
2.指令
指令的目的是做什么： 操作DOM
解释 : MVVM vm -> v 数据驱动
v-html 转义输出，也就是可以解析 xml 数据
v-text： 非转义输出，也就是无法解析 xml 类型数据
v-bind：将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值
<img v-bind:src = "src" />
<div v-bind:class = "">
</div>
<div v-bind:style = "">
</div>
简写形式：
<img v-bind:src="src" alt="">
<img :src="src" alt="">
类名绑定用法：
1.对象形式用法：
<p :class = "{ bg: true,size: true }"></p>
<p :class = "{ bg: true,size: false }"></p>
<p :class = "{ [classA]: true,[classB]: true }"></p>
2.数组形式用法：
<p :class = "[ 'size','bg' ]"></p>
<p :class = "[ classA,classB ]"></p>
<p :class = "[ classA,classB,5>3?'a':'b']"> </p>
样式绑定：
1.对象形式用法：
<p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
<p :style = "styleObj"></p>
2.数组形式用法：
<p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
<p :style = "[size,bg]"></p>
扫一扫
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
