一、template三种写法
（一）在Vue完整版里----写在HTML里
在index.html里直接写
<div id=xxx>
{{n}}
<button @click= " add">+1< /button>
</div>
在main.js的new Vue()的options里就不需要写template属性
new Vue({
el: '#xxx'
data:{n:0}, // data可以改成函数
methods:{add(){}}
})
（二）在Vue完整版里----写在options的template属性里
首先得在index.html里写好挂载点,但是注意:被选为挂载点的这个标签div#app会被替代为template属性里的内容
<div id=app>
</div>
在main.js的new Vue()的options里写template属性
new Vue( {
template:`
<div>
{{n}}
<button @click= " add">+1</button>
</div>`,
data:{n:0},
methods:{add(){ this.n +=1 }}
}).$mount( ' #app' )
（三）在Vue非完整版里----配合vue文件（vue单文件组件）,写在他的template标签里
在xxx.vue文件里写
<template> //template标签里必须写XML语法，XML更紧凑，解析器体积会小点
<div>
{{n}}
<button @click=" add">
+1
< /button>
</div>
</template>
<script> //默认导出一个对象，这个对象和options一模一样，除了以下两点
export default { ①不用写template属性了，上面写了
data(){ return {n:0} }, ② data属性必须是函数（不然写对象的话会出现多个组件公用一个data的情况），这个函数返回一个对象，就是我们的数据
methods:{add(){ this.n += 1 } }
}
</script>
<style>这里写CSS </style>
然后在main.js里
import Xxx from './xxx. vue' // 导入这个options 对象，并且取组件名（开头要大些）Xxx
new Vue({
render: h => h(Xxx) //视图用render
}).$mount( ' #app' )
但是注意:被选为挂载点的这个标签div#app会被替代为<template>标签里的内容
template语法
（一）使用XML语法
- XML的自闭合标签必须有
/ - XML的空标签可以直接闭合
（二）指令Directive
1、什么是指令
<div v-text="x"></div>
<div v-html="x"></div>
以v-开头的东西就是指令(名字起得不太好)
2、语法
`v-指令名:参数=值`，如`v-on:click=add`
- 如果值里没有特殊字符，则可以不加引号（那我还是都加引号！防止bug）
- 有些指令没有参数和值，如
v-pre - 有些指令没有值，如
V-on:click.prevent
3、修饰符：用来修饰指令
(1)有哪些
①v-on支持的有
.{keycode | keyAlias}重点.stop重点.prevent重点.capture.self.once.passive.native
(快捷键相关)
.ctrl.alt.shift.meta.exact
(鼠标相关)
.left.right.middle
②v-bind支持的有
.prop.camel.sync重点 完整解释请看我的这篇博客
③v-model支持的有
.lazy重点.number重点.trim重点
(2)重点讲解
-
.stop阻止事件传播/冒泡@click.stop = "add" -
.prevent阻止事件的默认动作@click.prevent点击时，阻止点击时的默认动作@click.prevent = "add"点击时，阻止点击时的默认动作，并且执行add函数 -
.{keycode | keyAlias}
<input @keypress.13='y'>在input里，键盘按下回车（回车的keycode=13），就执行函数y
<input @keypress.enter='y'>在input里，键盘按下回车，就执行函数y
4、具体用法
①插入（普通文本）表达式{{ }}
- 完整写法（但没人用）
<div v - text="表达式" ></div> {{object.a}}把options的data里的object.a显示在这{{n+1}}可以写任何运算(但不支持if和else){{fn(n)}}可以调用函数（默认在methods里找）- 如果值为undefined 或null就不显示
②v-html指令插入HTML内容
- 假设
data. x值为<strong>hi</strong> - 那么
<div v-html="x"></div>即可显示粗体的hi - 意思是我这个
"x"就是个富文本，你得把他当做富文本显示到页面
③v-pre指令写啥就展示啥
<div v-pre>{{ n }}</div>：我就想展示{{n}}v-pre指令不会对模板进行编译
④v-bind指令绑定一个标签的属性
- 完整写法：
<img v- bind:src="x"/> - 简写为:
<img :src="x" /> - 还可以绑定对象
<div: style="{border:'1px solid red',height :100}">
</div> //注意这里可以把'100px'写成100，但是100vm就不能省略单位了
⑤v-on指令绑定事件
- 完整写法(没人用)：
v-on:事件名
//事件处理函数可以为函数名
<button v-on:click="add">+1< / button> //点击之后，Vue会运行add()
//事件处理函数可以为函数的调用形式
<button v-on:click="xxx(1) ">XXX< / button> //点击之后，Vue会运行xxx(1)
//事件处理函数可以直接写代码
<button v-on:click="n+=1">XXX< / button> //点击之后，Vue会运行n+=1
即发现函数就加括号调用之，否则就直接运行代码
这导致一个问题，如果xxx(1)返回一个函数咋办
答:用Vue的人怎么可能想出这么复杂的用法。给xxx(1)赋值为a就行。
- 缩写：
<button @click="add">+1</button>
⑥v-if和v-else-if和v-else条件判断
如果满足条件，这个标签就出现在DOM树里，从而出现在页面
<div v-if="x>0">
x大于0
</div>
<div v-else-if="x=== 0">
x为0
</div>
<div v-else>
x小于0
</div>
⑦v-for循环
v-for="(value, key) in 对象或数字" :key="每个元素不会重合的值。"
<ul>
<li v-for="(u, index) in users" :key="index"> //key="index"有bug，以后再说
索引: {{index}} 值: {{u. name}}
</li>
</ul>
<ul>
<li v-for="(value, name) in obj" :key="name" >
属性名: {{name}}, 属性值: {{value}}
</li>
</ul>
⑧v-show（通过css）显示和隐藏，而不是添加入DOM树而显示隐藏
<div v- show= "n%2===0"> n是偶数 </div>
如果表达式的布尔值为true，就将这个标签（通过添加css样式的dispaly）显示在页面
- 是语法糖
- 近似等于
<div :style="{display :n%2===0? 'block': 'none'}"> n是偶数</div>
之所以近似等于，是因为
看得见的元素display不只有block
如table的display为table
如li的display为list-item
⑨v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
