Vue核心(一)

Vue核心(一)

一、初始Vue

1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2、app容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法

3、app容器里面的代码被称为Vue模板

4、vue实例和容器是 一 一对应的

5、 真实开发中只有一个vue实例，并且会配合着组件一起使用

6、{{xxx}}中的xxx要写成js表达式，且xxx可以自动读取到data中的所有属性

7、一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新(响应式数据)

注意区分: js表达式和js代码

1、表达式: 一个表达式会生成一个值，可以放在任何一个需要值的地方

（1） a
（2）a + b
（3）demo(1)
（4）x === y ？'a' : 'b'

2、js代码

（1）if() {}
（2）for() {}

二、模板语法

2.1 插值语法

功能: 用于解析标签体内容

语法: {{xxx}} xxx是js表达式，且可以直接读取到data中的所有属性

2.2 指令语法

功能: 用于解析标签(包括标签属性、标签体内容、绑定事件等等)

举例: v-bind:href="xxx" / :key="xxx" xxx同样要写js表达式，且可以直接读取到data中的所有属性

备注: vue中有很多的指令，且形式都是v-xxx(例如v-bind、v-if、v-model、v-on等等)

三、数据绑定

特点:

1、单向绑定(v-bind): 数据只能从data流向页面

2、双向绑定(v-model): 数据不仅能从data流向页面，还可以从页面流向data

注意:

a, 双向绑定一般都应用在表单元素上(例如input、select等)

b, v-model:value 可以简写为v-model， 因为v-model默认收集的就是value值

四、data与el的两种写法

· el的两种写法

（1）new Vue时配置el属性

（2）先创建Vue实例，随后再通过vm.$mount("#xxx")指定el的值

· data的两种写法

（1）对象式

（2）函数式(在组件中必须使用函数式)

· 一个重要原则:

由Vue管理的函数, 一定不要写箭头函数，一旦写了箭头函数，this就不再是Veu实例，而是window(全局对象)

五、MVVM模型

定义: M(model-模型)：对应data中的数据； v(view-视图): 模板； VM(vm-ViewModel)：Vue实例对象

特点:

a, data中所有的属性，最后都出现在vm身上

b, vm身上所有的属性及Vue原型上的所有属性，在Vue模板中都可以直接使用