Vue语句

Vue模板的3种写法

完整版Vue下，直接把模板写在html中，注意此时不能够写template选项，否则template的内容会替换<div id='app'>

// html
<body>
	<div id='app'> 
        <span>{{n}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue(
            {
                el: '#app',
                data: {
                    n:0
                }
            })
    </script>
</body>

完整版Vue下，使用template选项。使用$mount或着el选项来替换指定的标签挂载template。

注意：template中的模板必须拥有一个唯一的根标签。
```
const vm = new Vue({
    data:{
        n:0
    },
    template:`
		<div>
			<span>{{n}}</span>
		</div>
	`
}).$mount('#app')
```
完整版或运行时版本Vue，使用单独的**.vue文件**。
1. .vue文件有三部分 <template> <script> <style>。
- template是模板，在这里面不是html语言，而是XML语言，最大的区别在于XML标签必须闭合而HTML可以闭合也可以不闭合。闭合方法：<div></div> 、<input />、<div / >（这个代表div里面没有任何内容直接闭合，html中最好还是<div></div>来表示空的标签）。原因：XML更加严格严谨，降低了编译器的编写复杂度。而html比较松散，要适配的情况更多。
- script是该组件的Vue实例，但是不需要写template选项，另外data要使用函数的形式，防止多次调用的对象污染。
```
<script>
    export default { // 注意需要export
        data(){
            n:0
        },
    }
</script>
```
- style是CSS样式，可以使用SCSS less等语言。
1. 在JS中使用这个Vue实例
```
import Xxx from './xxx.vue' // import所用的变量名最好大写
// Xxx是一个Options对象
new Vue({
    el:'#app',
    render:h=>h(Xxx)
})
```

Vue语法

内容展示的语法：插值语法、v-text、v-html、v-pre
1. 插值语法：使用表达式，插入已有的数据、数据的处理以及函数的返回值。
  - {{ obj.n }}、{{ array }} 插入data、computed中的数据
  - 简单的数据运算以及处理：{{ n+1 }} 、 {{array.filter(u=>u>2)}}，表达式仅支持简单的运算而不支持if else等操作。
  - methods中的函数调用：{{ fn(...arg) }}，注意使用有返回值的表达式要注意返回值，否则有可能出bug
  - 如果值为undefined null，则vue不会将它们渲染到视图中
2. v-text：插值语法的本质，一般都使用插值语法
  1. <div v-text="n+1"></div> = <div>{{ n+1 }}</div>
3. v-html：插入html标签
  1. <div v-html="<strong>hi</strong>"></div> 插入一段strong标签
4. v-pre：preview预览，不对语句做任何编译。
  1. <div v-pre>{{ n }}</div>就是简单的 {{n}} 字符串。
绑定属性：v-bind:
1. 语法：v-bind:参数='值'
2. 绑定简单属性： <img v-bind:src='x'/>，冒号后面的值默认是JS表达式，所以这里的x是JS表达式，会先求x的变量然后赋值给src。
3. v-bind:简写就是:，所以<img v-bind:src='x'/> = <img :src='x'/>
4. 动态参数名：<a v-bind:[attributeName]="url"> ... </a>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。如果 attributeName 值为 href 那么实际上就是:<a v-bind:href="url"> ... </a>即绑定这个a标签的跳转地址。
5. v-bind:还能绑定一个对象：<div :style="{border:1px solid red , height:100}"></div>,Vue中的CSS样式单独单位默认是px，100px可以省略px直接写100。
绑定事件：v-on:
1. 语法：v-on:事件类型='处理函数'，处理函数有3种类型，函数名、JS表达式、函数调用态。
2. 处理函数为函数名：<button v-on:click='add'>点我</button>点击后触发add函数。
3. 处理函数为JS表达式：<button v-on:click='n+=1'>点我</button>当处理函数比较简单的时候直接写一段表达式即可。
4. 处理函数为函数调用态：<button v-on:click='add(1)'>点我</button>这里add(1)并不是直接调用，点击之后才会调用add(1) 。
5. 由函数调用态延伸的一个注意点：<button v-on:click='add(1)'>点我</button> add(1)如果返回的如果是一个函数，而使用者希望把这个返回的函数作为处理函数的话，Vue并不能实现这个功能。
6. v-on的简写为@，<button v-on:click='add'>点我</button> = <button @click='add'>点我</button>
条件判断：v-if、v-else-if、v-else

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

v-else-if、v-else的使用前提的是：前一兄弟元素必须有 v-if 或 v-else-if。

循环：v-for(value,key) in object/array
1. value就是每一项的值；key意为关键字：在对象中是每一项的属性名，而在array中则是索引。

3. 注意使用循环时一定要在后面绑定一个 key属性，这个key和上面所说的key不是一个意思，这个绑定的key属性可以是数组的索引，也可以是唯一的id（key属性的值必须是唯一的），如：:key='u.id'，最好别用数组的索引作为为key的值，某些情况有bug。 6. 显示、隐藏：v-show

根据表达式的值的真假条件,显示与隐藏元素。<div v-show='n%2===0'>show?</div>
这个指令对DOM元素的渲染是通过改变display为none或其他来实现的。注意不是所有看得见的元素都是 display:block；table的display是table；li的display是list-item
v-show与v-if的区别：
- v-show：通过改变元素css样式中的display来切换显示与隐藏。
- v-if：通过是否渲染元素到html结构中来实现显示与隐藏。
- 如果在实际使用上显示与隐藏的切换比较频繁，使用v-show可以节省性能；反之是用v-if比较合适。

Vue指令与自定义指令

指令：上面我们讲的v-show、v-text、v-bind:这些语法，其实就是Vue的内置指令。
指令的语法：v-指令名:参数=值，如:v-on:click=add
- 如果值里面没有特殊字符，可以省略引号：v-on:click=add = v-on:click='add'。
- 有些指令没有参数和值：v-pre。
- 有些指令没有值：v-on:click.prevent取消元素的默认点击事件。
自定义指令

Vue修饰符

修饰符的作用：给指令添加一些功能。

一些比较重要的修饰符

v-on相关：
1. .{keyCode|keyAlias} 指定按键（可以用keyCode指定，也可以通过Vue提供的按键别称指定）被按下时触发事件
2. .stop禁止事件传播（冒泡或者捕获）
3. .prevent禁止默认事件
4. 示例：
```
<a @click.prevent>click</a> 
<div @click.stop=add><div> 
<a @click.stop.prevent=add><a> 
```

v-bind

.sync修饰符

使用背景：某些情况下我们的数据存储在父组件中，而希望子组件能够获取并操作这个数据，在这种需求下，我们可能希望对props进行一个**“双向绑定”，但是“双向绑定”会带来维护上的问题，所以Vue并没有使用这个方法，而是推荐我们使用'update:myPropsName'的模式触发事件取而代之。而.sync修饰符的意义就是简化这个模式下所带来的繁琐的操作**。

示例：

// 父组件 App.vue
<template>
  <div>
    this is Vue total = {{total}}
    <hr>
    <!-- 不使用sync修饰符 -->
    <Sync :money='total' @update:money='total = $event'></Sync>
    <!-- 使用sync修饰符 -->
    <Sync :money.sync='total'></Sync> 
  </div>
</template>

<script>
    import Sync from './Sync'
    export default{
        data(){
            return { 
            total:10000
            }
        }
    }
</script>

// 子组件 Sync.vue
<template>
  <div>
    现在的钱：{{money}}
    <button @click="$emit('update:money',money-100)">花钱</button>
  </div>
</template>

<script>
    export default{
       props:["money"]
    }
</script>