vue的基础

vue代码结构;
data：存放数据

el：这个控制是哪块视图

methods：放我们的方法

1.差值表达式:
插值表达式{{}}，可以在前后插入一些内容,里面也可以是简单的运算式

v-text：会替换掉元素里的内容

v-html：可以渲染html界面

2.v-bind 简写：
界面元素属性值的绑定

括号里不加引号的都是我们data里的数据读取

如果想使用字符串需要加上引号

里面可以写表达式

里面也可以调用定义好的方法，拿到的是方法的返回值

<button v-bind:title="nihao">按钮</button>

3.v-on 简写@
进行事件的绑定，我们用的最多的是click事件绑定

<button @click='didiao'>低调</button>

4.事件修饰符
1).stop 阻止冒泡

    冒泡从内像外 可对单个标签或者多个使用，但不会影响全局冒泡

2).prevent 阻止默认事件

    例如a标签的跳转，可以阻止

3).capture 添加事件侦听器时使用事件捕获模式

    捕获模式从外到内 可对单个多个使用 如果冒泡为1-2-3 在3加上捕获，则结果是3-1-2

4).self 只当事件在该元素本身（比如不是子元素）触发时触发回调

    可对单个多个使用 在2加上self事件，则结果是 2-1-3

5).once 事件只触发一次

4. v-model数据双向绑定  
1)作用：数据双向绑定

2)注意：绑定的是表单控件

两种表达方式：

v-model:value='value1'      V-model=’value1’简写

<div id="app">

        <input type="text" v-model="value1">

        <select v-model="op">

            <option >+</option>

            <option >-</option>

            <option >*</option>

            <option >/</option>

        </select>

        <input type="text" v-model="value2">

        <button @click="getmath">=</button>

        <input type="text" v-model="num">

    </div>

</body>

<script>

    new Vue({
        el:'#app',

        data:{
            value1:'',

            value2:'',

            op:'+',

            num:''

        },

        methods:{
            getmath(){
                this.num=eval(this.value1+this.op+this.value2)

            }

        }

    })

</script>

5.Vue中样式的使用
(1)使用class样式:

1)数组

2)三木表达式

3)数组内置对象（对象的键是样式的名字，值是Boolean类型）

4)直接通过对象

(2)使用内联样式：

1.直接在元素上通过 :style 的形式，书写样式对象

2.将样式对象，定义到 data 中，并直接引用到 :style 中

1)在data上定义样式

2)在元素中，通过属性绑定的形式，将样式对象应用到元素中

3.在 :style 中通过数组，引用多个 data 上的样式对象

1)在data上定义样式

2)在元素中，通过属性绑定的形式，将样式对象应用到元素中

6.V-for和key属性
1)遍历数组，参数(item,index) in list

2)遍历对象，参数(value,key,index) in list

3)遍历数字，num in 10 (1~10)

4)key在使用v-for的时候都需要去设置key

5)让界面元素和数组里的每个记录进行绑定

6)key只能是字符串或者数字

7)key必须是唯一的

7.v-if与v-show区别
1)区别：

v-if删除会dom元素

v-show设置display:none

2)应用场景：

v-if只修改一次的时候可以使用v-if

v-show频繁切换的时候可以使用v-show