Vue模板语法 mustache语法列表渲染 事件

Vue模板语法 mustache语法 双大括号语法

指令

1. Vue 指令
   • 作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM
   • 以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM
   • 这个指令需要模板语法的支持，所以我们采用jsx语法糖
2. Vue 组件

模板语法

模板语法支持性还是很高的，数据类型都是支持的，但是不支持 输出语法 （ console.log alert ）

指令的具体展示

1. 格式：
   • v-xxx = “mustache语法”
   • v-xxx = “msg”
   • v-xxx = “{{msg}}” 错误的
2. v-html 将一个数据展示在一个DOM内容中， innerHTML( html属性 )
   • 防止脚本攻击 xss CSRF
3. v-bind
   • 使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind
   • 格式： v-bind:DOMattr = “data”
   • 简写： :DOMattr = “data”
4. v-text 非转义输出,v-html 转义输出

<p v-html="a">p>
<p v-text="a">p>

new Vue({
el:'#app',
data:{
a:'hello,world'
}
})

输出的结果：
hello,world
hello,world

5. class vs style
   1. class

• object写法

div>
div>

• arr写法

div>
div>

2. style

• object写法

div>
div>

• arr写法

div>

6. 条件渲染 v-if && v-show
   1. 条件渲染有两个指令， 一个是 v-if , 另外一个是 v-show
   2. v-if 有三种使用形式
      • 单路分支
      • 双路分支
      • 多路分支

<div id="app">
<h3> v-if 单路h3>
 单路分支 p>
<h3> v-if 双路 h3>
 双路1 p>
<p v-else> 双路2 p>
<h3> v-if 多路 h3>
 A p>
 B p>
<p v-else> C p>
div>

new Vue({
el: '#app',
data: {
msg: 'hello 下午到了',
flag: false,
type: 'A'
}
})

3. v-show

<div id="app">
<h3> v-show h3>
 千锋教育 p>
div>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
flag: false
}
})

4. v-if vs v-show
   • v-if 如果值为false，那么绑定的DOM就会被销毁
   • v-if 操作的是一个DOM的生成和销毁
   • 如果v-if的初始值时false,那么绑定元素是否会渲染呢？
     答：v-if如果是false，那么这个DOM元素是不会渲染的
   • v-show 操作的是一个DOM的dispay样式属性
   • 如果v-show的初始值是false,那么这个绑定的DOM元素是否会渲染呢？
     答：v-show不管值是什么，它都会渲染出来
   • 总结：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
   • template：相当于虚拟DOM
     • template标签如果放在模板的范围内使用，那么将来不会被解析渲染

<div id="app">