Vue基础语法

使用Vue通过new出来

new Vue()

1. Vue是 一个构造函数通过传入一个配置对象的方式，#app为Vue控制区域

new Vue({
el:"#app",
data:{
a:"Vue"
}
})

2. el是需要控制的元素或者区域data则是响应式的值可以写对象或者数组

    <div id="app">
        {{a}} 
    </div>

3. {{}}插值表达式也可以称之为胡子语法里面可以填写data中存放的值
4. 构造函数必然是有实列的，可以通过实列对象来改变值从而实时响应，比如vm.a=123

        const vm = new Vue({
            el:"#app",
            data:{
                a:"Vue"
            }
        })

5. 数组,改变时无法进行实时响应比如vm.b[0]=10;页面上无法改变为10，因为Vue用的是ES5方法Object.defineProperty,对象也是一样，当然Vue给我们提供了方法可以实时响应

	    <div id="app">
	        {{a}}
	        <p>{{b}}</p>
	    </div>
        const vm =new Vue({
            el:"#app",
            data:{
                a:"Vue",
                b:[1,2,3,4,5]
            }
        })

6. 数组改变实时更新方法

1.push、pop、shift、unshift、splice、sort、reverse //这些方法都是经过Vue重写过的方法
2.vm.$set(改变的数组,下标，值)，vm.$delete(改变的数组，下标)删除

7. 对象改变实时更新方法

1.vm.$set(改变的对象，属性，值)
2.vm.$delete(改变的对象，属性名)

{{}}插值表达式

1. 可以写JS数据类型数字、字符串、布尔、undefined、null、数组、对象：如果写对象则要在前后加空格比如 {{ {a:10} }}
2. 表达式运算、逻辑、三元

实列

    <div id="app">
        <p>{{[1,2,3,4,5,6,7,8,9]}}</p>
        <p>{{ null }}</p>
        <p>{{undefined}}</p>
        <p>{{123}}</p>
        <p>{{"hello Vue"}}</p>
        <p>{{true}}</p>
        <p>{{ {a:10} }}</p>
        <p>{{c ? "a":"b"}}</p>
        <p>{{1 + 1}}</p>
    </div>
            const vm =new Vue({
            el:"#app",
            data:{
                a:"Vue",
                b:[1,2,3,4,5],
                c:false
            }
        })