vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue之MVVM,模板语法和数据绑定

Vue基础之MVVM,模板语法和数据绑定

作者：永远没有404

这篇文章主要为大家介绍了Vue之MVVM,模板语法和数据绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

1. Vue概述

Vue官网

英文官网: https://vuejs.org/

中文官网: https://cn.vuejs.org/

MVVM架构模式

MVVM简介

MVVM 由 M：Model 模型，V：View 视图 ，VM：ViewModel 视图模型（Vue实例对象） 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

MVVM模式图

Vue简介

Vue特点

2. 初识Vue

  注意区分js表达式和js代码（语句）
  1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
  	(1). a
  	(2). a+b
  	(3). demo(1)    //函数调用表达式
  	(4). x === y ? 'a' : 'b'      //三元表达式
  2、js代码（语句）
  	(1). if(){}
  	(2). for(){}

<!-- 准备好一个容器 -->
<div id="demo">
	<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//创建Vue实例
	new Vue({
		el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
		data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
		name:'bilibili',
		address:'上海'
		}
	})
</script>

3. 模板语法

Vue模板语法有2大类：

1、插值语法：

2、指令语法：

<!-- 准备好一个容器-->
<div id="root">
	<h1>插值语法</h1>
	<h3>你好，{{name}}</h3>
	<hr/>
	<h1>指令语法</h1>
	<a v-bind:href="address.url.toUpperCase()" x="hello">点我去{{address.name}}1</a>
	<a :href="address.url" x="hello">点我去{{address.name}}2</a>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	new Vue({
		el:'#root',
		data:{
			name:'月见',
			// 可以设置成多级结构
			address:{
				name:'百度',
				url:'http://www.baidu.com',
			}
		}
	})
</script>

4. 数据绑定

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

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

<div id="root">
	<!-- 普通写法 -->
	单向数据绑定：<input type="text" v-bind:value="name"><br/>
	双向数据绑定：<input type="text" v-model:value="name"><br/>
	<!-- 简写 -->
	单向数据绑定：<input type="text" :value="name"><br/>
	双向数据绑定：<input type="text" v-model="name"><br/>
	<!-- 下面代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
	<h2 v-model:x="name">你好啊</h2> 
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	new Vue({
		el:'#root',
		data:{
			name:'bilibili'
		}
	})
</script>

5. el与data的两种写法

1、el有2种写法new

2、data有2种写法

3、一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是window。

<div id="root">
	<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	//el的两种写法 -----------
	const v = new Vue({
		//el:'#root', //第一种写法
		data:{
			name:'bilibili'
		}
	})
	console.log(v)
	v.$mount('#root') //第二种写法 
	// 例：
	setTimeout(() => {
		v.$mount('#root')
	},1000);       //定时器：页面过1秒后再显示vue效果
// ---------------------
	//data的两种写法
	new Vue({
		el:'#root',
		//data的第一种写法：对象式
		/* data:{
			name:'bilibili'
		} */
		//data的第二种写法：函数式 
		// 把data写成一个函数，且这个函数必须要返回一个对象，函数式写法一般用于组件和框架
		// 注意：此函数不是自己调用，是Vue调用的
		data(){
			// console.log('@@@',this) //此处的this是Vue实例对象（data为普通函数时，否则this指window）
			return{
				name:'bilibili'
			}
		}
	})
</script>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:
阅读全文