Vue.js系列（四）：Vue基础指令及数据绑定！

Vue.js系列（四）：Vue基础指令及数据绑定！

---

前言

---

注意本次用cdn形式引入js学习，有node.js的玩家可以用node.js。CDN下载地址：https://vuejs.org/js/vue.min.js以及Node.js：Vue系列: windows下npm安装vue

今天博主将为大家分享Vue.js系列（四）：Vue基础指令及数据绑定！不喜勿喷，如有异议欢迎讨论！

有一个强大的地基才能写出健壮的程序！请先阅读博主关于:Windows10用npm安装Vue！

---

目标

    学习如何使用Vue
    学习Vue插值,表达式绑定数据和v-指令
    学习基础指令v-show和v-text
    学习数据绑定指令v-model及指令修饰符.number,.trim,.lazy
    学习条件判断指令v-if,v-else,v-else-if的使用
    学习循环指令v-for的使用
    学习动态绑定指令v-bind
    使用v-bind动态绑定class和style属性

---

1.1.1学习如何使用Vue

在html标签body结束标记之前使用script标签引入vue.js文件

        ...html代码

        

        

    
    

在html中添加一个dom元素作为Vue实例的挂载目标.

创建Vue对象的实例

我们已经成功创建了第一个Vue应用！
现在数据和DOM已经被建立了关联，所有东西都是响应式的。 

---

1.1.2 Vue插值及表达式绑定数据

插值

使用双大括号将数据编译成普通文本,并输出到插值的位置.

    


        {
    {msg}}

    

    

    

• 插值标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

• 打开浏览器的调试工具.修改msg的值.页面上会随之一起更新.

• Vue的数据绑定是数据驱动.即:当数据发生变化时会触发html页面更新,所有相关联绑定的值也会随之一起变化.

表达式

vue的数据绑定不仅限于简单的属性键值,VUE对所有的绑定,都支持JavaScript表达式绑定

    


        

        {
    { count > 0 ? 'yes' : 'no' }}

        

        {
    { count + 1 }}

        

        {
    { msg.toUpperCase() }}

    

    

    

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。 13 限制: 不能绑定 语句({ { var a = 1 }}) 逻辑判断({ { if(true){ return msg } }})

---

1.1.3 基础指令v-text和v-show

指令 (Directives) 是带有 v- 前缀的特殊特性,绑定在DOM标签上。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-text指令

v-text 的效果完全等价于使用双大括号绑定的效果.

使用v-text和{ { }}绑定的区别.

v-text是指令,只能绑定到dom标签上. { { }}绑定可以放置在vue挂载目标节点内的任意位置,而不需要额外的dom标签.

v-show指令

    


        我是span标签,你看到我了吗?

    

    

    

v-show指令将根据表达式isShow的值的真假来显示/隐藏元素。 v-show所绑定的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的 CSS属性 display。

---

1.1.4 数据绑定指令v-model及指令修饰符

v-model 绑定数据

v-model 指令(它负责监听用户的输入事件以更新数据)在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

    


        
我是p标签,你看到我了吗?

        

            

            显示/隐藏

        

    

    

    

v-model.number修饰符

自动将用户的输入值转为数值类型.

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。

v-model.trim修饰符

自动过滤用户输入的首尾空白字符

v-model.lazy修饰符

在默认情况下，v-model 在每次 input (onInput)事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change (onChange)事件进行同步.

---

1.1.5 条件判断指令

v-if,v-else

在vue中使用v-if和v-else指令

    


        

        

        

            

            大写/小写

        

    

    

    

v-else使用限制 : 上一个兄弟节点必须包含 v-if或v-else-if指令之一

v-else-if

v-else-if，顾名思义，充当 v-if 的 else-if

    


        

            男

        

        

            女

        

        

            保密

        

        性别:

        男生

        女生

        保密

    

     

    

使用限制 上一个兄弟节点必须包含 v-if或v-else-if指令之一

---

1.1.6 循环指令v-for的使用

v-for循环数组或对象 表达式是 obj in objs 形式的特殊语法.objs是一个数组或对象,obj是元素迭代的别名.

也可以使用 (obj,index) in objs 形式的表达式.

当循环目标是数组时,第二个参数index是数组的下标.
\
当循环目标是对象时,第二个参数index是对象的键名.

    


        


            使用v-for指令循环一个数组

        

        


            


                

            

        

        


            


                

                

            

        

        

        


            使用v-for指令循环一个对象

        

        


            


                

                

            

        

    

    

    

---

1.1.7 动态绑定指令v-bind

它是一个 vue 指令，用于绑定 html 属性,v-bind指令可以被简写为:

    


        
html属性不能使用双大括号形式绑定，只能使用v-bind指令

    

     

    

这里的 html 最后会被渲染成：

    


        html属性不能使用双大括号形式绑定，只能使用v-bind指令

    

更多的v-bind部分使用场景:

    


        

        

        

        

        

        

        

        按钮

    

     

    

---

1.1.8 使用v-bind动态绑定class和style属性

使用v-bind:class,v-bind:style 绑定多个值，vue 对 class 和 style 这两个 html 属性进行了一定程度的增强。

基于对象绑定针对 class 的增强

    


        

            将对象绑定到class属性上

        

    

     

    

页面渲染结果:

    将对象绑定到class属性上

当isActive或hasError发生变化时,class 列表将相应地更新。例如: isActive的值为true时,class将渲染为:

    将对象绑定到class属性上

基于数组绑定针对 class 的增强

    


        

            将数组绑定到class属性上1

        

        

            将数组绑定到class属性上2

        

    

     

    

页面渲染结果:

    将数组绑定到class属性上1





    将数组绑定到class属性上2

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表.

如果你也想根据条件切换列表中的 class，可以用三元表达式.

当有多个条件class时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

    将数组绑定到class属性上2

class属性的值仅在 isActive的值为true时包含样式activeClassName.

基于对象绑定针对 style 的增强

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript对象。CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

    


        

            将对象绑定到style上

        

    

     

    

html渲染结果:

    将对象绑定到style上

基于数组绑定针对 style 的增强

    


        

            将数组绑定到style属性上

        

    

     

    

html渲染结果:

        将组绑绑定到style属性上

    

style绑定数组时,数组中的每个有效的style对象,都将被输出到html标签的style属性中.

---

总结一下：

    使用script标签引入vue文件
    使用new Vue({...})创建Vue对象的实例
    使用双大括号插值绑定数据
    v-指令使用 v-text 和 v-show 
    使用v-model绑定数据了解v-model的修饰符作用
    学习条件判断指令v-if,v-else和v-else-if
    学习v-for指令输出对象和数组
    动态绑定指令v-bind绑定html标签的一些属性
    使用v-bind动态绑定class和style属性
    绑定class和style时使用对象和数组绑定以及根据表达式条件绑定

---

勇于尝试（做练习）：第二天博主会贴出答案！

    1. 创建一个vue实例页面.并使用指令显示或隐藏一个html节点
    2. 循环输出一个数组或对象
    3. 使用v-bind指令绑定html节点的样式,并通过vue的属性控制

示例如下：

    
    
    
    


    


        
        

            数字(id): {
    {id}} , n:{
    {n}}
        
        

            字符串(msg): {
    {msg}}
        
        
        

            对象:{
    {obj}}

            调用对象的 JSON.stringify(obj,null,2) 2个空格缩进
        
        

            数组:{
    {arr}}
        
        
        

            调用函数:{
    {arr.toString()}}
        
        

            调用函数:{
    {reverseMsg()}}
        
        
        

            三元表达式:{
    {show?'显示':'隐藏'}}
        


        
        

            v-text:
            
        
        

            v-show:
            
            
            
                
            
打开控制台修改vm.show看看效果
        
        

            v-model:

            v-model: 

            v-model.trim:

            v-model.lazy:

            v-model.number:
        

        

            v-if,v-else:

            
            
        

        

            v-for:
            

                

                    
                
            
        

        

            v-bind:
            
            
                状态:
            


            

                v-bind条件组合:
                
                
                    按钮状态
                
                条件判断 show:, n: ,
                
            
        

    
    
    
    

---

Vue.js系列（四）：Vue基础指令及数据绑定！分享完毕了！各位小伙伴快去试试吧！

---

最后

• 更多参考精彩博文请看这里：《陈永佳的博客》

• 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！