vue2 基础入门知识

vue介绍

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

vue模板语法有两大类：

1.插值语法： 功能：用于解析标签内容  写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中所有属性

2.指令语法： 功能：用于解析标签（包括：标签属性，标签内容，绑定事件...）

el与data的两种写法：

el："",

$.mount('')

data

1.对象式

2.函数式 
1.创建vue

	<div id="app">
			<p>{{ms}}</p>
			<p>{{title}}</p>
			<hr>
			<h2>简单的javascript表达式</h2>
			<p>{{3+3}}</p>
			<p>{{ms.length}}</p>
			<p>{{8>5?'yes8大':'6大'}}</p>
			
		</div>
		<script>
			new Vue({ //创建vue实例
				el: "#app", //指定模板（指定vue的使用范围）
				data: {
					ms: "你好你在干什么",
					title:"今晚下雨"
				} //指定vue的data数据
			})
		</script>

---

2.基础指令

指令：带v-开头的特殊属性，链接模板与vue实例

<div id="app">
			<!-- v-text -->
			<h1>Vue指令</h1>
			<h3>文本渲染指令 v-text</h3>
			<p v-text="msg"></p>
			<p v-text="8+5"></p>
			<p v-text="msg+'不可以有'"></p>
			<p v-text="tip"></p>
			
			<h3>文本渲染指令 v-html(可以解析html标签)</h3>
			<p v-html="tip"></p>
			<p>{{msg}}</p>
			<p>可以编写简单的Js：{{2+3}}</p>
			<p>msg的长度{{msg.length}}</p>
			
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					msg:"你在干什么",
					tip:"<strong>河南</strong>是个好地方"
				}
			})
		</script>

---

单向绑定指令 v-bind

你看到的 v-bind 特性被称为指令。指令带有前缀 v- 

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

双向绑定指令 v-model

---

v-if条件指令

根据条件真假 显示不同字符

<div id="app">
		<p v-if="isLog">今天天气不错</p>
		<p v-else>即可大V你困难时</p>
	</div>	
	<script>
		new Vue({
			el:"#app",
			data:{isLog:false}
		})
	</script>

多重条件

<div id="app">
	<h2>根据分数奖励</h2>
	<p v-if="score>=90">九阳神功</p>
	<p v-else-if="score>=80">独孤九剑</p>
	<p v-else-if="score>=70">易筋经</p>
	<p v-else-if="score>=60">蛤蟆功</p>
	<p v-else>啥也没有</p>
	</div>	
	<script>
		new Vue({
			el:"#app",
			data:{score:76}
		})
	</script>

v-show

和上面一样

<div id="app">
		<p v-if="isLog">今天天气不错</p>
		<hr>
		<p v-show="isLog">今天是个雨天</p>
		
	</div>	
	<script>
		new Vue({
			el:"#app",
			data:{isLog:true}
		})
	</script>

v-for：列表循环指令

<div id="app">
			<h3>复杂列表对象</h3>
			<p v-for="(item,index) in ls" :key="index">{{index+1}}-{{item.name}}-{{item.age}}</p>
			<h3>对象</h3>
			<p v-for="(value,s) in yang" :key="s">{{s}}-{{value}}</p>
			<h3>渲染数字</h3>
			<p v-for="item in 5" :key="item">{{item}}</p>
			<h3>列表渲染指令</h3>
			<p v-for="item in list" :key="item">{{item}}</p>
			<h3>列表渲染指令带索引</h3>
			<p v-for="(item,index) in list" :key="item">{{index+1}}-{{item}}</p>
			<h3>优化列表渲染</h3>
			<p v-for="(item,index) in list" v-bind:key="index">{{index+1}}-{{item}}</p>
			<p>key 帮助优化vue内部渲染，key值要求是唯一，不建议用index，会取数据的id</p>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data(){
					return{
						ls:[
							{name:"mumu",age:"18"},
							{name:"一一",age:"28"},
							{name:"二二",age:"38"},
						],
						list:['vue','react','angular','jquery'],
						yang:{"name":"yangyang",age:18,sex:"nan"}
					}
				}
			})
		</script>

---

事件响应函数 @click=""

<div id="app">
			<h3>事件响应函数</h3>
			<button @click="calc(-1)">-</button>
			
			<input type="text" v-model.number="num">
			<button @click="calc(1)">+</button>
			<h3>事件处理</h3>
			<button v-on:click="num++">{{num}}</button>
			<h3>事件处理简写</h3>
			<button @click="num--">{{num}}</button>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				methods:{
					calc(step){
						// 在js中访问data中num值需要this
						this.num+=step;
						if(this.num<1){
							this.num=1
						}if(this.num>999){this.num=999}
					}
				},
				data(){
					return{
						num:1
					}
				}
			})
		</script>

事件修饰符、

1.prevent：阻止默认事件（常用）  2.stop：阻止事件冒泡   3.once：事件只触发一次

4. capture：使用事件的捕获模式    5.self：只有event.target是当前操作的元素才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕