少侠请重新来过 - Vue学习笔记(三) - Vue基础插入HTML可以使用v-html指令，可以直接输出为真正的HTM

模板语法

插值

文本

使用双括号进行文本插值，它会自动的将我们双向绑定的数据显示出来，如果只想一次性插值可以直接使用 v-once 指令

<div>
    <p>{{ msg }}</p>
    <p v-once>{{ msg }}</p>
</div>

HTML

插入HTML可以使用v-html指令，可以直接输出为真正的HTML。

动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。

<div>
    <div v-html="htmlStr"></div>
</div>

JavaScript表达式

在双括号内可以进行简单的运算，三元运算，但是不支持语句和流控制。

<div>
    <p>{{ msg ? 'Msg-' + msg : ''}}</p>
</div>

属性

在HTML属性中需使用 v-bind 命令，布尔值属性如果值是 false 该属性会直接被移除，: 是 v-bind的语法糖

<div>
    <button v-bind:id='itemId' :disabled='disabled'></button>
</div>

过滤器

Vue允许自定义过滤器，在差值的尾部添加一个管道符 (|) 可以对数据进行过滤。可以用于对格式化文本。

允许串联调用 <p>{{ msg | formatMsg | formatMsg2 | .... }}</p>
允许接收参数第一个参数是数据本身，传递的第一个参数实际是方法中的第二个参数

<template>
    <div>
        <input type="text" v-model="msg"/>
        <p>{{ msg | formatMsg }}</p>
        <p>{{ msg | formatMsg('toLowerCase') }}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:'vue'
        }
    },
    filters:{
        formatMsg(value = '',fnName='toUpperCase'){
            return value[fnName]();
        }
    },
}
</script>

指令

指令是指带有v-前缀的特殊属性，指令的指责是当其表达式的值改变时将某些行为应用在DOM上。

v-if: 根据表达式的值的真假来移除插入元素 <p v-if='msg'>{{msg}}</p>
v-bind: 响应更新HTML属性，简写为: <button v-bind:id='itemId' :disabled='disabled'></button>
v-on: 监听DOM事件，简写为@ <button v-on:click='clickEvent' @change='changeEvent'></button>

修饰符

以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。 <button v-on:submit.prevent='submit'></button>

计算属性

计算属性是为了解决在模板中放入太多计算逻辑，让模板变得难以维护的解决办法。

计算属性可以完成一些比较复杂的逻辑，最终必须返回一个结果
每一个计算属性中都包含一个getter和一个setter。
计算属性可以依赖与其他计算属性
计算属性可以依赖于其他实例的数据
计算属性与methods的不同在于，计算属性基于它的依赖缓存，只有依赖缓存发生变化才会重新取值。也就是说，只要依赖值不变，返回的结果就是之前计算过的计算结果，而不会执行函数

<template>
    <div>
        <input type="text" v-model="msg"/>
        <p>{{ computedMsg }}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:'vue'
        }
    },
    computed:{
        computedMsg:function(){
            return 'computedMsg = ' + this.msg;
        }
    },
}
</script>

`v-bind`与`style`绑定

绑定HTML class的方式

直接写入 <div class='active'></div>
值 <div :class='activeClass'></div> 值可以为实例属性或者计算属性，或者JavaScript表达式
对象语法通过 v-bind:class 设置一个对象，实现动态的切换class，当值为true的时候，div会拥有对象中的key值的类名 <div :class='{"active",isActive}'></div>
数组语法，当要定义多个class的时候，可以直接绑定一个数组 <div :class='[activeClass,errorClass]'></div>

绑定内联样式

直接 <div style='color:red;'></div>
对象语法 <div style='{color:"red"}'></div> CSS属性名称使用驼峰或短横杠分隔命名

内置指令

v-once 定义它的元素和组件只旋绕一次，首次渲染后便不会随着数据变化进行渲染，将被视为静态内容
v-if v-else-if v-else 条件渲染语句，根据表达式中的值在DOM中渲染或者销毁元素

<p v-if='msg'>{{ msg | formatMsg('toLowerCase') }}</p>
<p v-else>not msg</p>

v-show 根据条件改变css属性 display 跟 v-if的区别在于 v-if是真实的条件渲染，它会确保块在切换中渲染或者销毁事件监听跟子组件，且它是惰性的，第一次为真的时候才会开始局部编译。v-show则是简单的切换css属性
v-for 根据一组数组的选项列表进行渲染。需要以一种item in items的特殊形状语法。item是items迭代的数组元素别名。v-for也可以遍历对象

<p v-for="(msgItem,index) in msgList" :key='index'>{{msgItem}}</p>

当我们修改数组的时候，Vue会检测到数据变化，所以会用v-for进行更新。Vue包含了一组观察数组变异的方法
- push() 往数组后端添加一个元素, 并返回新数组的长度。
- pop() 往数组后端删除一个元素，返回被删除的元素
- shift() 往数组前端删除一个元素，返回被删除的元素
- unshift() 往数组前端增加一个元素，并返回新数组的长度。
- splice() 通过删除现有元素和/或添加新元素来更改一个数组的内容。
- sort() 用来指定按某种顺序进行排列的函数排序后的数组。请注意，数组已原地排序，并且不进行复制。
- reverse() 将数组中元素的位置颠倒，并返回该数组的引用。
- filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
- concat() 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
- slice() 返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。

事件处理

监听事件可以使用 v-on/@的指令来监听DOM事件

$event 是 Vue提供的一个特殊变量，用于访问原生的Dom事件
事件修饰符
- .stop (阻止事件冒泡)
- .prevent (阻止默认事件)
- .capture (添加事件侦听器时使用事件捕获模式)
- .self (只当事件在该元素本身触发时触发回调)
- .once (只触发一次)
按键修饰符
- enter 回车
- tab 换行
- ...

<template>
    <div>
        <input type="text" v-model="msg"/>
        <button @click="clickEvent('123',$event)">提交</button>
        <p>{{msg}}</p>
        <p v-for="(msgItem,index) in msgList" :key='index'>{{msgItem}}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:'vue',
            msgList:['msg','hello'],
            time:new Date()
        }
    },
    methods:{
        clickEvent(value,event){
            console.log(value);
            console.log(event);
            if(this.msg){
                this.msgList.push(this.msg);
                this.msg = '';
            }
        }
    }
}
</script>

为什么在 HTML 中监听事件?

使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

表单控件绑定

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

<template>
    <div>
        <div>
            <template v-for="(pick,index) in pickList">
                <input type="radio" 
                    :key="index" v-model="picked" :checked="picked" 
                    :value="pick" :id="'pick'+pick">
                <Label :key="index" :for="'pick'+pick">{{pick}}</Label>
            </template>
            <p>选择了{{picked}}</p>
        </div>
        <div>
            <template v-for="(check,index) in checkList">
                <input type="checkbox" 
                    :key="index" v-model="checked" 
                    :checked="checked" :value="check" :id="'check'+check">
                <Label :key="index" :for="'check'+check">{{check}}</Label>
            </template>
            <p>选择了{{checked}}</p>
        </div>
        <select name="" v-model="selected" id="">
            <template v-for="(select,index) in selectList">
                <option :key="index" :value='select'>{{select}}</option>
            </template>
        </select>
        <p>选择了{{selected}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'vue',
            pickList:['1','2','3'],
            checkList:['1','2','3'],
            selectList:['1','2','3'],
            picked:2,
            checked:['1'],
            selected:'1',
            msgList:['msg','hello'],
            time:new Date()
        }
    },
}

v-model修饰符

.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
.number 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
.trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

少侠请重新来过 - Vue学习笔记(三) - Vue基础