Vue.js优势

简介:HTML模板+Vue实例+JSON数据

轻量:17kb,性能好

设计思想:视图与数据分离,无需操作DOM

社区:大量的中文资料和开源案例

MVC框架

MVC-表示软件可以分成三部分

1、模型(Model),2、视图(View),3、控制器(Controller)

<div id="box">
	<h1>{{msg}}</h1>
	<!-- 借助表达式{{变量名}} -->
</div>
	//创建controller
	//在Vue中controller就是Vue实例
	var vm=new Vu
	//通常管这个实例叫VM,但不是固定写法
	el:'#box',//el是用来与页面关联的选择器
	data:{//数据(model)
			msg:'hello yunjianwu'
		},//实例中可以设置很多配置项
	});

表达式概述

使用双大括号包裹JS代码构成表达式

表达式用来做什么

将双大括号中的数据替换成对应属性值进行展示

双大括号语法

也叫模板语法,Mustache语法

<div id="app">
	<span>Massage:{{msg}}</span>
</div>
 <script>
	 new Vue({
			el:"#app",
			data:{
					msg:'hello!'//改变msg的值,花括号里的msg也会改变
				}
			})
</script>

表达式中可以写哪些内容

1、JSON数据、数字、字符串

<div id="box1">
    <!-- 变量 -->
	<h1>{{msg}}</h1>
	<!-- 数字 -->
	<p>{{10}}</p>
	<!-- 字符串 -->
	<h1>{{'string'}}</h1>
	<!-- 注意区分变量和字符串 -->
	<!-- 放入表达式 -->
    <h1>{{1+1}}</h1>
	<h1>{{'hello'+name}}</h1>
	<!-- 不推荐写复杂代码,常用最多写三目运算符,原因是使用MVC设计思想,是为了是页面与数据进行很好的分离,不能写if else -->
	<h1>{{2>3?'true':'false'}}</h1>
</div>
<script>
	var vm=new Vue({
		el:'#box1',
			data:{
			msg:'hello',
			name:'二狗'
				}
				})
</script>
        👍赞 1
说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...