vue的认识

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2. 真实开发中只有一个Vue实例，并且会配合着组件一起使用
3. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
4. 一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

MVVM的理解

MVVM架构是指：

数据层（Model）：应用数据以及逻辑，主要指从后端获取的数据

视图层（View）：页面UI组件，主要由 HTML 和 CSS 来构建

视图数据模型（ViewModel）：数据与视图关联起来，数据和 DOM 已经建立了关联，是响应式的，使编程人员脱离复杂的界面操作

ViewModel主要功能是实现数据双向绑定：

数据变化后更新视图，既：model有数据更新时UI组件会响应变化

视图变化后更新数据，界面上如果有input输入框，输入数据时，model中的数据也会更新

• MVVM模型：
  • M：模型（Model），data中的数据
  • V：视图（View），模板代码
  • VM：视图模型（ViewModel），Vue实例

  •         <div id="app">  <!-- view层 -->
    			<h2>{{name}}</h2><!-- 大括号语法 -->
    		</div>
    		<script>
    		const vm = new Vue({//MVVM框架  vm层
    			el:'#app', //挂载
    			data:{//model层
    				name:'张超'
    			}
    		})
    		</script>

 

 

数据绑定 

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

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：

双向绑定一般都应用在表单类元素上（如：<input>、<select>、<textarea>等）
v-model:value可以简写为v-model，因为v-model默认收集的就是value值
v-bind 绑定的意思  是一个vue的指令 v-bind:title的简写:title

<div id="app">
	<!-- <h2 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h2> -->
	<h2 :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h2> 
</div>
	<script>
		const vm = new Vue({
			el:'#app',
			data:{
				message:`页面加载于${new Date().toLocaleString()}`
			}
		})
	</script>

data有2种写法

data的第一种写法：对象式

data:{
	name:'张超'
	} 

data的第二种写法：函数式

 data(){
		return {
			name:'张超'
		}
	}