模板，指令与修饰符

template三种写法

一 在Vue完整版里，写在HTML里

<div id=xxx>
{{n}}
<button @click="add">+1</button>
</div>
new Vue({
el: '#xxx',
data:{n:0}, // data 可以改成函数
methods:{add(){}}
})

二 在Vue完整版里,写在选项里

<div id=app>
</div>
new Vue({
template: `
<div>
{{n}}
<button @click="add">+1</button>
</div>`,
data:{n:0}, // data
methods:{add(){ this.n += 1 }}
}).$mount('#app')
//div#app会被替代

三 在Vue非完整版里，配合xxx.vue文件

<template>
<div>
{{n}}
<button @click="add">
+1
</button>
</div>
</template>
 
<script>
export default {
data(){ return {n:0} },
// data 必须为函数
methods:{add(){ this.n += 1 }}
}
</script>
<style>这里写 CSS </style>


*************************************
//另一个地方写如下代码
  import Xxx from './xxx.vue'
// Xxx 是一个options对象
new Vue({
render: h => h(Xxx)
}).$mount('#app')
  

template语法（）

使用XML语法

• XML的自闭合标签必须有/
• XML的空标签可以直接闭合
  

什么是指令

<div v-text="x"></div>
<div v-html="x"></div>
以v-开头的东西就是指令(名字起得不太好)

语法

 `v-指令名:参数=值`，如`v-on:click=add`

• 如果值里没有特殊字符，则可以不加引号（那我还是都加引号！防止bug）
• 有些指令没有参数和值，如v-pre
• 有些指令没有值，如V-on:click.prevent
  

修饰符：用来修饰指令

事件修饰符，按键修饰符

v-on支持的有

• .{keycode | keyAlias} 重点

<input @keypress.13='y'>在input里，键盘按下回车（回车的keycode=13），就执行函数y

<input @keypress.enter='y'>在input里，键盘按下回车，就执行函数y

• .stop 重点

//.stop 阻止事件传播/冒泡
@click.stop = "add"

• .prevent 重点

.prevent 阻止事件的默认动作

@click.prevent点击时，阻止点击时的默认动作

@click.prevent = "add"点击时，阻止点击时的默认动作，并且执行add函数

• .capture
• .self
• .once
• .passive
• .native
  

按键码

鼠标按键修饰符

(快捷键相关)

• .ctrl
• .alt
• .shift
• .meta
• .exact
  

(鼠标相关)

• .left
• .right
• .middle
  

v-bind支持的有

• .prop
• .camel
• .sync重点
  

v-model支持的有(在Vue表单里学)

• .lazy 重点
• .number 重点
• .trim 重点
  

展示内容

插入（普通文本）表达式{{ }}

• 完整写法（但没人用）<div v - text="表达式" ></div>
• {{object.a}} 把options的data里的object.a显示在这
• {{n+1}}可以写任何运算(但不支持if和else )
• {{fn(n)}}可以调用函数（默认在methods里找）
  

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
即发现函数就加括号调用之，否则就直接运行代码
***********************************
缩写：<button @click="add">+1</button>

v-if和v-else-if和v-else条件判断

<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>
近似等于
<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>