Vue简介，模板语法，mvvm模型

vue简介

vue特点

• 采用组件化模式，提高代码复用率，且让代码更好维护

• 声明式编码，让编码人员无需直接操作DOM，提高开发效率(类似于面向对象)

  
      
  
      {{p.id}}-{{p.name}}-{{p.age}}
      
  
  1
  2
  3
  4
  5

• 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

  • 数据->虚拟DOM->真实DOM
  • 如果有了新的虚拟DOM，vue会将新的和旧的进行比较（Diff比较）

vue基本语法

//el第一种写法
new Vue(
{
el:'#root',
data:{
name:"kitty",
num:1
}
})

//el第二种写法
const v=new Vue({})
v.$mount('#root');

//data第二种写法
new Vue({
el:'root',
data:function(){		//data(){return{}}这种写法也可以
return{
name:'kitty'
}
}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

vue模板语法

插值语法只适用于标签体内的内容 {{name}}

指令语法适用于标签属性的内容 v-bind:

• v-bind（单向数据绑定）

  
  
  	//简写
  
  new Vue({
  
  data:{
  
  myurl:'www.baidu.com'
  
  }})
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  • 只要遇到v-bind那么vue会把引号里的东西当成**表达式执行**
  • v-bind可以简写成：

• v-model (双向数据绑定)

  
  
  1
  2

  • 改变页面数据，vue实例中对应的数据也改变
  • v-model指令只能用于表单类元素上

mvvm模型

• M（模型）：对应data中的数据
• V（视图）：模板
• VM（视图模型）：Vue实例对象

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

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