学习Vue的第一天

学习Vue的第一天

概述

实例化参数

指令

一、Vue概述

了解

• 作者： 尤雨溪 (现任阿里巴巴Weex团队技术顾问)。
• 官网： cn.vuejs.org
• vue的定位： 是一个渐进式框架 前端三大mvvm框架 vue , react ,angular。
• 特点：

1. 简单，上手简单
2. 结合Angular指令与react组件思维
3. 生态丰富(插件多)api文档完善

二、实例化参数

• el:"#app"
  选择目的标签
• data：{}
  指定数据
• data(){return{}}
  一个函数返回一个对象

		<div id="app">
			
		</div>
		<script type="text/javascript">
			new Vue({
    
    
				// 指定模板标签
				el:"#app",
				// 指定数据
				data:{
    
    
					msg:"你好vue!",
					msg2:"<i>河南</i>是个好地方!"
				}
			})
		</script>

三、指令

• 文本渲染指令

1. { {指令值}}
2. v-text 渲染input框文本，不能识别标签
3. v-html 渲染html文本，可以识别标签

		<div id="app">
			<h1>{
   
   {msg}}</h1>
			<p v-text="msg.length"></p>
			<!-- v-html识别标签 -->
			<p v-html="msg2"></p>
		</div>
		<script type="text/javascript">
			new Vue({
      
      
				// 指定模板标签
				el:"#app",
				// 指定数据
				data:{
      
      
					msg:"你好vue!",
					msg2:"<i>河南</i>是个好地方!"
				}
			})
		</script>

• 属性绑定指令

4. v-bind
5. :属性=“属性值”(简写)

• 条件渲染

6. v-show
7. v-if
   频繁切换用v-show
   一次性切换用v-if
   v-show隐藏是css方式隐藏节点
   v-if是直接清空节点