Vue--常用指令

    new Vue({
        el: '#app',
        // 用于定义数据
        data:{
            msg: 'Hello Vue',
            htmlStr: '<h1>一级标题</h1>'
            url: 'https://www.baidu.com',
            username: '张三',
            age: '',
            score: 99
            
        },
        // 用于定义方法
        methods:{
            addNum:function(){
                // 需使用 this 关键字才能访问到 data 中的数据
                this.num = this.num + 1
            },	
            /* 事件处理函数的简写形式---推荐 */
            addNumN(2){
        	this.num = this.num + n
            }
            
        }
    })

Mustache语法

在vue项目中最简单且使用最多的渲染语法就是“Mustache”语法 (双大括号)，也叫插值表达式

<div id='#app'>
    {{ msg }}
</div>

v-text

类似双大括号语法渲染数据的另一种方式是使用v-text

<div id='#app'>
    <p v-text='msg'></p>
</div>

v-html

由于双大括号语法无法渲染HTML标签，当需要渲染html格式的字符串时需使用 v-html 指令

<div id='#app'>
    <div v-html='htmlStr'></div>
</div>

v-bind属性绑定

用于给属性动态绑定属性值。同时属性绑定还有简写形式，v-bind:属性=属性值 简写为 :属性=属性值

<div id='#app'>
    <a v-bind:href='url'>百度首页</a>
    <!-- 上面代码可以简写为如下，功能不变 -->
    <a :href='url'>百度</a>
</div>

v-model双向数据绑定

表单元素设置了之后会忽略掉元素本身的 value，checked，selected 属性

双向数据绑定：

• 修改数据，页面内容会更随发生变化
• 修改页面内容，数据也会同时发生改变

<div id='#app'>
    <input type='text' v-model='username' />
</div>

v-model修饰符

修饰符	描述
.number	自动将用户输入的值转换为数值类型
.trim	去除用户输入值开头和结尾的空白字符
.lazy	将input事件切换为change事件

<div id='#app'>
    <input type='text' v-model.number="age">
    <input type='text' v-model.trim="username">
    <!-- 用于只要在失去焦点后才触发事件 -->
    <input type='text' v-model.lazy="username">
</div>

v-on事件绑定

用于给监听DOM事件，绑定事件触发事件处理函数

/*
语法：
v-on:事件类型=事件处理函数名称()
简写语法：
@事件类型=事件处理函数名称()
*/

<p>num的值是:{{num}}</p>
<button v-on:click="addNum1">num + 1</button>
<button @click="addNumN(2)">num + n</button>

事件修饰符

注意：多个修饰符之间可以连写，但注意书写的顺序，顺序不同会导致不同的结果

修饰符	描述
.stop	阻止事件冒泡。相当于原生JS中的stopPropagation()方法
.trim	阻止默认行为。相当于原生JS中的preventDefault()方法

按键修饰符

修饰符	描述
.enter	按下Enter(回车)键触发
.delete	按下Delete(删除)键触发
.esc	按下Esc(退出)键触发

v-for列表渲染

v-for指令基于一个数组渲染一个列表，与JS的遍历语法相似

<li v-for="(item,index) in list" :key='item.id'>{{item}}</li>
/*	
	item  数组的每一个元素
	index 当前元素所处索引
	list 要遍历的数组
*/

key的作用：帮助Vue区分不同的元素，从而提高性能，防止列表状态混乱

key的注意点：

• 使用v-for时都建议指定key的值（提高性能、防止列表状态混乱）
• key的值只能是字符串或数字类型
• key的值必须具有唯一性，否则终端会报错
• 建议把数据项id属性的值作为key的值
• 使用index的值作为key的值没有任何意义(index的值不具有唯一性)

条件渲染

v-if

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素。同时还可以配合 v-else-if v-else 指令使用

<div id="app">
    <!-- 当前因为data中的数据score为99，当前只会渲染 优秀这个div -->
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score<90&&score>=60">良好</div>
    <div v-else>不及格</div>
</div>

v-show

v-show也是条件渲染指令，它根据表达式的真假来显示或隐藏元素

<div id="app">
    <div v-show="true">测试内容</div>
</div>

v-if和v-show的区别

• v-if指令 每次动态创建或移除元素，实现元素的显示和隐藏，所以如果刚进入页面是，某个元素默认不需要显示出来，而后期这个元素很有可能也不需要被展示出来，用v-if性能更好
• v-show指令 动态为元素添加或移除 display:none 样式来实现元素的显示或隐藏。所以如果需要频繁的切换元素的显示状态，用v-show性能更好