vue核心

初识Vue

搭建基础框架

---

创建Vue实例

Hello, {{name}}

---

总结

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

root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。

root容器里的代码被称为Vue模板。

Vue实例和容器是一一对应的。

真实开发中，只有一个Vue实例，并且会配合组件一起使用。

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

注意区分`{{ }}`中内容：js表达式和js代码（语句）

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

(1)a

(2)a+b

(3)demo(1)

(4)x===y?'a':'b'

2.代码（语句）

(1)if(){}

(2)for(){}

一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。

模板语法

Vue中有2中模板语法：

插值语法：

功能： 用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中xxx所对应的属性。

指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）。

举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样写js表达式，且可以直接读取到data中xxx所对应的属性。

备注：Vue中很多的指令，且形式都是 v-????，此处我们只是拿v-bind举个例子

数据绑定

Vue中有2种数据绑定的方式：

单向绑定（v-bind）：

数据只能从data流向页面。

双向绑定（v-model）：

数据不仅能从data流向页面，还可以从页面流向data。

备注：

双向绑定一般都应用在表单类元素上（如：input、select等）

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

el与data的两种写法

el

写法一：在new Vue时配置el属性

newVue({

el:'#root',

})

写法二：先创建Vue实例，随后通过Vue原型的方法$mount指定el的值，该方法更加灵活

constvue=newVue({})

vue.$mount('#root')//指定el的值

/*

// 可灵活使用，如在计时器中进行异步挂载

setTimeout(() => {

   vue.$mount('#root')

}, 1000)

*/

data

写法一：对象式

newVue({

el:'#root',

data: {

name:'World'

   }

})

写法二：函数式

newVue({

el:'#root',

//data: function() {

//简写为

data() {

console.log('@@@',this)//此处的this是Vue实例对象

return{

name:'World'

       }

   }

})

重要原则

由Vue管理的函数（例：data），一定不要写箭头函数()=>{}，一旦写了箭头函数，this就不再是Vue实例了。

MVVM模型

M：模型（Model）：对应data中的数据

V：视图（View）：模板

VM：视图模型（ViewModel）：Vue实例对象

学校名称：{{name}}

学校地址：{{address}}