引入

1.vue 基本使用的三个注意事项

• 一个 html 页面中可以存在多个vue实例对象, 但是实例对象的变量名强烈建议唯一, 而且每一个 vue 对象负责一个特效功能
• js 中所有的变量和语法都是区分大小写的, new Vue()
• 建议实例化 vue 对象的代码写在 body 的最后面或者 head 里面, 免得出现html元素无法获取的错误出现

一.模板语法

插值语法 : {{ }}

• 三目运算符(与三元表达式类似) 语法 : [条件] ? '条件成立显示左' : '条件不成立显示右'

    
    
    
    



    

        
字符串:{{msg}}
        
数值:{{phone}}
        
数组:{{array1}}
        
对象:{{obj1}}
        
字符串:{{link}}
        
运算:{{(10+10)*10}}
        
三目运算符:{{10>20?'true':'false'}}
    

• 展示

二.指令

文本指令

指令	说明
v-html	让HTML渲染成页面
v-text	标签内容显示js变量对应的值
v-show	放1个布尔值：为真, 标签就显示；为假, 标签就不显示
v-if	放1个布尔值：为真, 标签就显示；为假, 标签就不显示

0.v-show 与 v-if 的区别

• v-show : 当值为 false 时, 标签还存在, 只是不显示, 因为设置了 display:none 属性
• v-if : 直接进行的 DOM 操作, 对标签进行删除或插入

1.v-html : 渲染 HTML

• 代码

    
    
    



    
链接渲染:{{link}}

• 展示

2.v-text : 标签内容显示 js 变量所对应的值

• 代码

• 展示

3.v-show : 显示 / 隐藏内容

• 代码

    
    
    



    
    {{msg}}
    
    
梦里有我曾见过的月光?也有我如初待我的模样

• 展示

对于按钮的字体显示也可以不使用if判断, 直接使用三目运算符来完成

4.v-if : 显示 / 删除内容

• 代码

    
    
    



    
    {{msg}}
    
    
梦里有我曾闻过的花香??也有你和我初遇的地方

• 展示

事件指令

指令	说明
v-on	触发事件（不推荐）
@	触发事件（简写推荐）
@[event]	触发event事件（可以是其他任意事件）

1.代码演示

• v-on:click 可以简写成@click

    
    
    
    



    v-on:click
    
    @click
    
    @click(方法带括号)
    
    @click(方法带括号+参数)
    
    @click(方法传事件参数)

2.效果展示

属性指令

指令	说明
v-bind	直接写js的变量或语法（不推荐）
:	直接写js的变量或语法（简写推荐）

1.代码示例

• v-bind:class='[js变量]'可以缩写成：:class='[js变量]'

    
    
    
    



    
    
    

    点击变色
    
    
几回花下坐吹箫??银汉红墙入望遥

2.展示

三.style 和 class

0.数据绑定语法

• style 绑定样式

:style="[js变量]"
:style="[数组]"
:style="[对象]"
:style="[三目运算符]"

• class 绑定类

:class="[js变量]"
:class="[数组]"
:class="[对象]"
:class="[三目运算符]"

1.代码示例, 绑定不同的属性和类

    
    
    
    



    
普通的p标签
    

    
设置了class_obj的p标签(字符串)
    

    
设置了class_obj2的p标签(数组)
    

    点击放大字体
    

    
设置了style_obj的p标签

四.条件渲染

指令	释义
v-if	相当于： if
v-else	相当于：else
v-else-if	相当于：else if

1.代码示例

    
    
    


    
(if type==='1')展示我
    
(else-if type==='2')展示我
    
(else)展示我

2.展示

五.列表渲染

1.v-if + v-for + v-else 控制书籍信息

• 代码示例

    
    
    
    
    
    



    
我的书单
    
    展示书单
    

    
    

        

            
书籍名称
            
价格
        
        
        

            
{{item.title}}
            
{{item.price}}
        
    
    
    

        

            
书籍名称
            
价格
        
        

            
空空如也
            
空空如也
        
    

• 展示

2.v-for 遍历数组、对象、数组套对象

• 代码示例

    
    
    
    
    
    




    
数组for循环遍历
    

        
{{index}} —— {{value}}
    

    
对象for循环遍历
    

        
{{key}} —— {{value}}
    

    
数组套对象for循环遍历
    

        

            
书名
            
价格
            
数量
            
出版社
        
        

            
{{info.title}}
            
{{info.price}}
            
{{info.count}}
            
{{info.publish}}
        
    

• 展示

ps :

• Python中取列表或字典的 index / key 一般在前面, value 在后面

• 在 vue 中数组的 index 与 value 位置是反过来的

• 对象的 key 和 value 也是反过来的

3.Key 值的作用

• key的作用主要是为了高效的更新虚拟DOM（虚拟DOM用了diff算法）
• 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
• 页面更新之后，会加速DOM的替换（渲染）

:key="[变量]"

4.数组的更新与检测

尤雨溪对数组的部分操作方法进行了重写, 重写的方法对数据进行操作也将会触发视图更新

• 可以检测到变动的数组操作

push()     # 最后位置添加
pop()      # 最后位置删除
shift()    # 第一个位置删除
unshift()  # 第一个位置添加
splice()   # 切片
sort()     # 排序
reverse()  # 反转

• 检测不到变动的数组操作

filter()  # 过滤
concat()  # 追加另一个数组
slice()   # 切片
map()     # 映射 

六.事件处理

事件	说明
input	当输入框内容变化的时候, 实时触发的事件(一般用作检索)
change	当输入框内容发生改变并失去焦点时, 触发的事件
blur	当输入框失去焦点的时候, 触发的事件

• change 和 blur 最本质的区别

如果输入框为空, 失去焦点后, change不会触发, 但是blur会触发

1.代码示例 : 实现搜索框过滤数据功能

    
    
    
    
    



    

        

            

                
                

                
                
                

                    
                    
{{data}}
                
            
        
    

2.展示

3.补充箭头函数

• 箭头函数是 ES6 版本的语法 =>

• 箭头函数可以替换函数表达式，但是不能替换函数声明

• 至关重要的一点 : 在箭头函数中, 没有this; 如果你在箭头函数中使用了this, 那么该this一定就是外层的this

list: ['边城', '城南旧事', '薛定谔的猫', '黑猫警长', '猫和老鼠', '最后一枝花', '茶花女']
// 正常写法
let newList = list.filter(function (item) {
    if (item.length >= 3) {
        return true
    } else {
        return false
    }

})
// 箭头函数ES6版本的语法
let newList = list.filter(item => {
    if (item.length >= 3) {
        return true
    } else {
        return false
    }
})

// es5
var fn = function(a, b) {
    return a + b;
}
 
// es6 箭头函数写法，当函数直接被return时，可以省略函数体的括号
const fn = (a, b) => a + b;

七.事件修饰符

事件修饰符	说明
.stop	只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self	只处理自己的事件，子控件冒泡的事件不处理
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）

ps:

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

因此，用 v-on:click.prevent.self 会阻止所有的点击

而 v-on:click.self.prevent 只会阻止对元素自身的点击

1.代码示例

    
    
    




    
    

        
        
{{data}}
        

        
        
不拦截
        

        
        
点击拦截
        

        
        
点击拦截
        

        
        

            只执行一次
        
        

    

2.展示

• 阻止冒泡事件

• a 链接不拦截、拦截、拦截再执行方法

• 点击只执行一次

八.按键修饰符

1.监听键盘事件

• v-on:keyup / v-on:keydown 简写 @keyup / @keydown

.enter  # 常用
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

2.代码示例 : 监听键盘实现跳转页面

3.展示

九.数据的双向绑定

1.input 输入框的数据的双向绑定

• input 输入框使用 v-model='[js变量]' 来实现

2.代码展示 : 前端验证用户信息

    
    
    
    
    
    



    
    请输入您的名字：
    

    请输入您的密码：
    

    欢迎 ：{{name}}
    

    {{error}}  
    登录

3.展示

十.表单控制

1.checkbox 选中

2.单选框

3.多选框

    
    
    
    
    
    



    

    
checkbox 选中
     ?请勾选以确认阅读!

    {{check_1?'已勾选':'未勾选'}}:{{check_1}} 
    


    
单选框
    性别：
     男 ♂?
     女 ?♀?
     未知 ?
    

    您的性别 : {{radio_1}}
    


    
多选框
    
        
        
         {{hobby.name}}
    
    

    您的爱好：{{hob}}、
    

• 展示

4.购物车结算案例 : 数量*价格

• 代码示例

    
    
    
    
    
    



    

        

            

                

                    

                        
书籍名称
                        
价格
                        
数量
                        
选择
                    
                    

                        
{{item.name}}
                        
{{item.price}}
                        
{{item.count}}
                        
                        

                    
                
                

                已选书籍：  
                
                    {{book.name}} : {{book.count}} 个、
                
                
总价：{{getPrice()}}  
            
        
    

• 展示

5.购物车结算案例 : 增加全选与取消全选按钮

• 代码

    
    
    
    
    
    



    

        

            

                

                    

                        
书籍名称
                        
价格
                        
数量
                        
{{allChecked?'取消全选':'全选操作'}}
                            
                            
                        
                    
                    

                        
{{item.name}}
                        
{{item.price}}
                        
{{item.count}}
                        
                        

                    
                
                

                已选书籍：  
                
                    {{book.name}} : {{book.count}} 个、
                
                
总价：{{getPrice()}}  
            
        
    

• 展示

6.购物车结算案例 : 实现书籍数量可进行加减

• 代码示例

    
    
    
    
    
    
    



    

        

            

                

                    

                        
书籍名称
                        
价格
                        
数量
                        
{{allChecked?'取消全选':'全选操作'}}
                            
                            
                        
                    
                    

                        
{{item.name}}
                        
{{item.price}}
                        

                            
                             +??
                            {{item.count}}
                            
                             -??
                        
                        
                        

                    
                
                

                已选书籍：  
                
                    {{book.name}} : {{book.count}} 个、
                
                
总价：{{getPrice()}}  
            
        
    

• 展示

十一. v-model 进阶

1.v-model 之 lazy、number、trim

• lazy ：等待input框的数据绑定失去焦点之后再变化
• number ：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
• trim ：去除开头结尾的空格

2.代码示例

    
    
    



    

     {{myText1}}
    

    
     {{myText2}}
    

    
     {{myText3}}
    

    
     {{myText4}}

3.展示