Vue学习笔记01 vue模板-MVVM模型-数据绑定

Vue学习笔记01 vue模板-MVVM模型

简介

vue是什么？
构建用户界面的渐进式JavaScropt框架

Vue的特点
1.采用组件化模式，提高代码复用率，且让代码更好维护
2.声明式编码，让编码人员无需直接操作DOM，提高开发效率
3.使用虚拟DOM和DIff算法，尽量复用DOM节点
原生：更新之后全部重新覆盖？vue:追加式，更新不一样的

el / data

el:指定当前Vue实例为哪个容器服务，通常为css选择器字符
一个容器只能对应一个Vue实例

data:用于存储数据，数据供el所指定的容器使用，{{xxx}}使用
1.data中所有的属性，最后都出现在vm身上
2.vm身上所有的属性及Vue原型上的所有属性，在Vue模板中都能使用

root容器里的代码被称为Vue模板
解析流程:现有root容器-> Vue实例 -> 根据el取到容器进行解析替换、生成新容器替换页面的老容器

//root容器里的代码被称为[Vue模板]
<div id="root">
   <h1>{{name}}</h1>
</div>
<script>

el与data的两种写法

el的两种写法

1.el作为配置参数

//创建Vue实例,参数是配置对象{}
const v = new Vue({
	el:'#root', //第一种写法
	data:{
		name:'ranan'
	}
})

2.使用vue实例的$mount()方法把实例挂载到容器上

const v = new Vue({
         data:{
             name:'ranan'
         }
})
v.$mount('#root');    

data的两个写法
1.对象式

const v = new Vue({
         data:{
             name:'ranan'
         }
})

2.函数式

组件里data必须用函数式写法，函数有单独的作用域，复用组件时，数据不会被共享。
由Vue管理的函数，一定不要写箭头函数，要保持this的指向是Vue实例

const v = new Vue({
	   //data:function(){
       data(){//此处的this是Vue实例对象
		return{
			name:'ranan
		}
	}
})

模板语法

模板语法用在Vue模板里面，也就是上面说的容器里面

• {{}}插值语法:常用于两个标签体之间
• 指令语法:用于解析标签，标签属性、绑定事件…

数据绑定 v-bind/v-model

v-bind: 动态绑定标签属性值，可以简写成:，格式是v-bind:属性名="表达式"，这里的属性值是引号里面的表达式，不是"表达式"这个字符串
<p name="true">表示p有一个属性，属性的值是”true“字符串
<p :name="true"> 表示根据表达式动态绑定一个name属性:name="表达式",这里name的值是true布尔类型。

v-model: 用于双向数据绑定，只能用在表单类元素默认收集元素的value属性。但是对于checxbox来说，value是checked属性。所以v-model:value="name"可以简写为v-model="name"

//使用了模板语法的会自动解析里面的内容
//完整写法
单向数据绑定:<input type="text" v-bind:value="name">
双向数据绑定:<input type="text" v-model:value="name">
 
 //简写
单向数据绑定:<input type="text" :value="name">
双向数据绑定:<input type="text" v-model="name">

checxbox
对于checxbox来说，选择框关注的是是否checked，所以v-model其实是v-model.check
当需要通过属性初始化显示checked，以及交互修改checked，就可以使用v-model

<!-- 既要初始化，又要交互，可以选择v-model -->
<!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
<input type="checkbox" v-model="isAll"/>

MVVM模型

Vue没有完全遵循，但是Vue的设计收到了MVVM的启发

M(Model)模型:对应data中的数据
V(View)视图:模板
VM(ViewModel)视图模型:Vue实例对象
1.实现DOM监听
2.实现数据绑定

在代码中理解

MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。

模型model指的是后端传递的数据，视图view指的是所看到的页面。

视图模型viewModel是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：

• 将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定
• 将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听

这两个方向都实现的，我们称之为数据的双向绑定