Vue起步01-------浅解mvvm模型以及v-model指令
学习前端三大框架之一的Vue时,首先我们得知道它的运作设计的基本模式----mvvm模式
一,mvvm模式
01,模型图
02,图解
m:模型,数据模型data
v:视图,html模板视图
vm:视图模型,创建的Vue的实例对象vm
DOM Listeners:Vue实例所挂载的目标对象中DOM节点的监听,并将改变值通过vm传递给model数据模型data
Datas Bindings:数据绑定,由于View里面的显示数据是绑定model中的Data数据,所以将DOM Listeners所监听的数据改变值同步到View,就实现了数据动态绑定。
二,基本结构
el:通过CSS选择器指定实例Vue的载体目标
data:数据的初始化,也就是上述的数据模型data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue_基本结构</title>
</head>
<body>
<div id="app">
<!--
/*
* v-model实现数据同步。
*mvvm模型
*m:模型,数据模型data
*v:视图,html模板视图
*vm:视图模型,创建的Vue的实例对象vm
*在实例对象vm中实现数据双向绑定的vm中主要是存在DOM Listeners和Datas Bindings
*DOM Listeners:DOM树的监听事件,并将改变值通过vm传递给model数据模型data
*Datas Bindings:数据绑定,由于View里面的显示数据是绑定model中的Data数据,所以就实现了数据动态绑定
*/ -->
<input type="text" v-model="name"/>
<p>Hello,{{name}}</p>
<p v-text="name"></p>
</div>
</body>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
/**
*注意:let是没有预处理机制的,所以所有调用行为都得在其初始化initialize之后才有效
* 若是使用var声明,因为它不是声明函数,所以预处理机制只会在编译之前对其做声明处理
* 而不做赋值处理
*/
let data = {
name: "burningSnow",
age: 21,
gender: "male",
select: ""
}
//防止外部代码对其data对象obj进行更改,冻结其对象obj使其他代码不能删除或更改任何属性。
//Object.freeze(obj);
//obj.name = "燃情雪";//无效
//创建实例Vue对象
const vm = new Vue({
//提供一个实例的挂载目标,通过CSS选择器指定根元素RootElement
el: '#app',
//初始化数据
data: data,
methods: methods
})
/**
* 可以通过vm.$el获取根元素节点
* 注意:Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。
*/
console.log(vm.$el === document.querySelector("#app"));//true
console.log(vm.$data === data);//true
</script>
</html>
三,v-model指令【多用于表单】
01,v-model指令其实是一个语法糖,是结合了v-bind
指令属性绑定和数据模型data对象中的属性值更新【利用相应的触发事件实现】
02,可应用标签
<input>
<select>
<textarea>
03,语法糖实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue_v-model指令</title>
</head>
<body>
<div id="app">
//利用input事件
<input type="text" :value="name" @input="Input"/>
<p>Hello,{{name}}</p>
//利用change事件
<select :value="select" @change="Select">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>selected:{{select}}</p>
//利用input事件
<textarea :value="textarea" @input="Textarea"></textarea>
<p>{{textarea}}</p>
</div>
</body>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
let data = {
name: "burningSnow",
age: 21,
gender: "male",
select: "",
textarea: "你好"
}
let methods = {
Input: function() {
let e = event;
this.name = e.target.value;
},
Select: function() {
let e = event;
this.select = e.target.value;
},
Textarea: function() {
let e = event;
this.textarea = e.target.value;
}
}
const vm = new Vue({
el: '#app',
data: data,
methods: methods
})
</script>
</html>
菜鸟爬行中…