vue指令合集

注意:

1、所谓指令,其实就是元素的属性

2、所有的指令,前提是在js中声明了是Vue对象

3、参数

1、静态参数:一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML attribute:

...

此处的href是参数

...

v-on 指令,它用于监听 DOM 事件,在这里参数是监听的事件名

2、动态参数:可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:例如:(动态参数不是太理解)

...

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 "href",那么这个绑定将等价于 v-bind:href。

同样的你可以使用动态参数为一个动态的事件名绑定处理函数:

...

在这个示例中,当 eventName 的值为 "focus" 时,v-on:[eventName] 将等价于 v-on:focus。

实例:  点击会有弹窗的出现

    {{message}}

   

3、在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}


以下符合逻辑但是不是表达式的也不会生效

{{ var a = 1 }}

{{ if (ok) { return message } }}

v-text指令

设置标签的文本值(textContent)

1、v-text已经将文本的内容替换,所以源文本的内容不会显示

2、{{content}}实在原来的文本的基础上进行拼接。


v-text的使用:

       

       

           

            {{ info }}

           

           

                深圳

           

           

{{}}的使用:

           

           

                {{message}}深圳

           

           

v-text拼接文本  :

             

           

           

           

           

   

   

v-once指令

通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

这个将不会改变: {{ msg }}

msg只随着属性的变化而变化一次

v-html指令

设置元素的innerHTML

1、更新文本的值,直接将原文本替换,和v-html差不多

2、当v-html指向的内容符合HTML标签的形式时,会生成新的标签。

 

 

v-html更新文本 

       

        黑马程序员

     

v-html新增标签

       

       

       

       


       

   

   

v-html和v-text的对比

     
        //显示的是一个百度链接

       

                  //显示的是百度链接

         

   

v-on指令

为元素绑定事件 监听DOM事件

1、格式

1、

2、

事件名为常用事件 click mouseover 等

2、点击事件

或者 v-on:换成@

3、直接更改属性的值

4、Vue写方法

      var app = new Vue({

            el: "add",

            data: {

                message: "张浩琦",

                foo:"123"

            },

            methods: {

                dolt: function() {

                      //逻辑

                }

            }

        })

5、触发函数

触发函数时会出现集中不同情况

1、一个按钮触发一个函数

  无参数时  方法的名称可以不加小括号

 

 

2、一个按钮触发两个函数(两个函数都需要带小括号,执行顺序按照先后顺序)


   

   

   

计数器的实战

0-10之间

   

       

       

       

   


   


v-on补充

传递自定义参数,事件修饰符@keyup后的.XXX(https://cn.vuejs.org/v2/api/#v-on)

方法传递参数

键盘监听(以回车为例)

或者

如果不加.enter,则按键盘上的任意按钮,都会调用sayHi('小铁',555)的方法

       

       

       

       

   


   

访问原生事件DOM对象$event

 

       

        //如果此处参数是event,则输出的时候会报错

   


   

v-show指令

根据表达值的真假,切换元素的显示和隐藏(其实是操作元素的display)

1、< img src="" v-show="true">;true显示,false不显示

2、v-show里面的值还可以加判断

v-show="false" 标签元素不显示

     

       

       

v-show="isShow" isShow的值为false  标签元素不显示

       

       

v-show="isShow" isShow的值为true  标签元素显示 点击不显示

       

       

v-show="age==16"显示,否则隐藏  此处v-show里面的值为boolean值

       

   

   

v-if指令

根据表达式的真假,切换元素显示和隐藏(操纵Dom元素,而非样式,v-show操纵的是样式)

1、用法和v-show完全一样,v-if改变的是Dom元素的添加或删除,v-show改变的是样式,不会新增加Dom元素和删除Dom元素的

2、实际工作中,频繁切换的元素用v-show,反之用v-if,因为操作Dom消耗比较大。

v-if和v-else的使用

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。


       

张浩琦

       

是的

       

   

   

   

template元素,一个不可见的包裹元素

   


       

是的

       

       

   


   

v-else-if

 


       

   


   

用key 管理可复用的元素

可复用元素举例 此处的表单元素即可复用元素 这样做其实是不符合实际的,要用key属性来解决

 

       

       

       

       

   


   

v-bind指令

操作元素的属性(如:src,title,class等)

格式

1、< img v-bind:src ="imgSrc" >

2、< img v-bind:title="imgTitle+'123456'"> 拼接

3、< img v-bind:class="isActive?'active':''">三元表达式的形式表示判断,判断isActive的值,如果符合,class的属性值为active,如果不符合,class的属性值为空。(这种写法比较麻烦,可以采用对象的形式)

4、< img v-bind:class ="{active:isActive}"> 对象的形式表示判断,如果isActive的值为true,class的属性为active,否则class的属性为空

5、简写形式:< img :class ="{active:isActive}">(v-bind可以删除,但是在属性前需要加一个:)

 

       

       

        为一个标签赋的属性赋予两个变量的值

       

       

        啦啦啦啦啦

       

           

       


       

           

            添加一个属性值

           

           

           

           

            添加一个属性值

            添加两个属性值

       

   

   

   

综合写法

  


var vm = new Vue({

    el:"#demo",

    data:{

      one:"string",

      classa:true,

      classb:false

    }

})

效果

5、遗留问题

待解决

问题一:判断并把vue对象的变量作为此标签的class值

        判断并把vue对象的属性值作为此标签的class值

        //此时添加的span标签的class的属性值为classes而非fonts

       

解决方式:

   

       

问题二:    如何用对象的形式一次添加两个属性值

对象形式判断条件是否成立,成立变为块元素,不成立变为行元素

            添加一个属性值

           

解决措施:两个属性值判断之间用逗号隔开

  添加一个属性值41564156416

 

           

           

           

           

            var vm = new Vue({

            el: "#add",

            data: {

                imgSrc: "./image/q1.jpg",

                imgTitle: "这是一个标签",

                judge: true,

                classes: "fonts"

            }

        })

v-bind指令的详细补充 包括样式的改变

修改class和style, v-bind指令与一半属性共存

对象语法

样式一:

.static {

            width: 100px;

            height: 100px;

            border: 1px solid red;

        }

       

        .backgroundcolor {

            background-color: green;

        }

       

        .divBig {

            width: 200px;

            height: 200px;

        }

        1234656

   


   

   

样式二:将所有的样式写在一个属性对象中

.active {

            width: 100px;

            height: 100px;

            background-color: red;

        }

   

   

使用计算属性(看不懂)

 


   

   

   

   

   

数组语法

可以把一个数组传给 v-bind:class,以应用一个 class 列表:

样式一:将对象存入到数组中

        .active {

            width: 100px;

            height: 100px;

        }

       

        .error {

            background-color: red;

        }

       

       

       

       


   

   

   

   

样式二:三元表达式形式


  .active {

            width: 100px;

            height: 100px;

        }

       

        .error {

            background-color: red;

        }

 

   


   


   

对象语法在数组中使用

        .active {

            width: 100px;

            height: 100px;

        }

       

        .error {

            background-color: red;

        }

       

        .question {

            border: 10px solid black;

        }

   

   

   

用在组件上(没有操作过,官方原文档)

当在一个自定义组件上使用 class 属性时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

例如,如果你声明了这个组件:

Vue.component('my-component', {

  template: '

Hi

'

})

然后在使用它的时候添加一些 class:

HTML 将被渲染为:

Hi

对于带数据绑定 class 也同样适用:

当 isActive 为 truthy[1] 时,HTML 将被渲染成为:

Hi

绑定内联样式

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

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

        张浩琦

   

   

使用方法和class的更改差不多   

   

v-for指令

根据数据生成列表结构(列表的生成依赖数据,所以在data里面建立)

v-for指定的内容会随着vue对象的数据的改变而进行dom节点数量的改变

语法:

语法一:列表的每一项内容为数组的内容(列表里面如果有原内容,则原内容每一次都会被打印)

张浩琦{{item}}

//item是遍历的每一项,可以改名字,但是得遵循命名规则

//in 关键字 不能修改

//arr 要循环的数据名

//如果li标签里面原本就有内容,例如“张浩琦”,那么遍历的每一项数据生成的节点都是张浩琦


var app = new  Vue({

    el:"#app",

    data:{

        arr:[1,2,3,4,5]

    }

})

结果

张浩琦

张浩琦

张浩琦

张浩琦

张浩琦

语法中的内容不一样

  内容用一个对象储存

 


       

               

               

               

  •                 {{item.name}}

               

  •        

   

   

   

    结果1-10

v-model(model 模型;典型;模特儿)

便捷获取和设置表单元素的值(双向数据绑定) 需要和表单元素一起使用

双向绑定即当message的内容改变,表单的内容会随着改变,表单的内容改变,message的内容也会随着改变

 

       

       

        {{message}}

       

   

   

修饰符(不是太清楚)

.lazy(懒加载)

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:


没有.lazy

       

       

       

       

加上.lazy

 

            {{message}}

       

span中的值并不会随着message的改变而同步改变,只有表单失去焦点时,span中的值才会同步改变,类似于change

   


   

.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

.ref像v-model一样,实现数据的双向绑定(主要是为了获取当前的元素对象input对象)

       

       

       

        {{name}}

       

        {{age}}

   

   

项目实战

小黑记事本项目

学到的内容

1、数组元素的长度 content.length

2、 this.content.splice(index, 1); 删除指定的索引内容,如果是2,则删除当前索引内容和之后的那个索引内容

 

       

       

       

               

  • {{index+1}}{{item}}
  •        

       

       

   


   

你可能感兴趣的:(vue指令合集)