vue Notes-vue指令、vue条件语句

一.vue语法指令:

vue的指令是将js的vue实例绑定至html元素,通过vue实例中的data内的属性或者methods内的方法,对所绑定的子元素进行操作。

vue语法的基本格式:

html:

    <body>
        <div id="app">
        // vue code
        </div>
    </body>	

js:

    var vm =new Vue({                // new Vue vue格式固定语法
        el:'#app',                   // 绑定id
        data:{                       // data 用来操作html     
            vuehello:"hello vue"     //标签:'内容'   可以为对象 
        },
        methods:{                    //methods 用来操作dom
            click(){                 //js 事件名
                alert(233)           //js 事件
            }
        }
    })

1.插值表达式

2.v-model

v-model是双向数据绑定的,一般用于input标签!

3.v-text

v-text用来操作文本,会替换对应标签内的值

v-text替换标签内的值

4.v-html

v-html用于输出html,可以将标签内的html标签解析后输出

5.v-bind

v-bind的语法是v-bind:css标签属性="vue标签名"
v-bind 与中间的属性无联系 与data里面的属性绑定
v-text替换标签内的值
v-bind的简写形式:css标签属性="vue标签名"
v-text替换标签内的值

v-bind的基本用法

v-bind:style

js控制css是否显示
vue语法定义css样式
直接定义:
使用对象定义:
三元表达式:

v-bind:src

6.v-on

v-on属性,用来绑定事件。v-on:click="plus" 可以简写为 @click="plus"

7.v-pre

v-pre就不会输出vue中的data值。跳过这个元素和它的子元素的编译过程。

7.v-cloak

vue.js在渲染元素的时候,会有一个闪烁的过程:

fouia.png

因为vue.js读取和渲染元素需要一定时间。而解决闪烁的方法是在html对应标签中加上v-cloak指令,css中添加 [v-cloak] {display: none;}

8.v-once

v-once只渲染元素和组件一次。随后的重新渲染时,不渲染v-once指令所在的标签。

二.vue条件语句:

1.v-if

v-if 指令将根据表达式isShow的值(true 或 false )来决定v-text 的文本内容是否显示

2.v-else

v-else与v-if一起使用,当v-if为false的时候执行。

3.v-else-if

v-else-if的语法是:

v-if= "color === 'red'"
v-else-if= "color === 'red'"
v-else-if= "color === 'red'"
多个v-else-if

v-else

v-else必须在 v-else-if 或 v-if 后使用。v-else-if 必须跟在 v-if 或者 v-else-if 之后。

4.v-show