Vue小结

目录

• 概述

• 实例化参数

• 指令

---

概述

vue是一款渐进式JavaScript前端框架
作者：尤雨溪
特点：
1.简单，上手方便
2.结合Angular指令与react组件思维
3.生态丰富(插件多)API文档完善

 实例化参数

el:"#app"
选择目标标签

data:{}
指定数据

<script src="js/vue.js"></script>
<div id="app">
			<h1>Vue</h1>
			<h3>{{msg}}</h3>
			<input type="text" id="" value="" v-model="msg"/>
			<p v-text="msg"></p>
			<p>{{3*9/3*9}}</p>
			<p>{{msg.split('').reverse().join('')}}</p>
			<p>{{msg.length}}</p>
			<p v-text="msg.repeat(3)"></p>
			<p v-text="msg2"></p>
			<p v-html="msg2"></p>
		</div>
<script type="text/javascript">
			new Vue({
				//指定模板标签
				el:"#app",
				//指定数据
				data:{msg:"你好vue!",
			          msg2:"<strong>中国</strong>是个好地方"	
				}
			})
		</script>

data(){return{}}
一个函数返回一个对象

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
			
			<p>{{msg}}</p>
	
		</div>
<script type="text/javascript">
			new Vue({
				el:"#app",//指定模块
				data(){  //data：function{}的简写
					return{
						msg:"你好vue!",
					
					}
				}
			})
		</script>

methods 定义事件

 指令

指令的值是可以是简单的JavaScript命令

文本渲染指令

    {{}}
    v-text
    v-html
(渲染html文本)
    v-model
(表单value值)

代码块实例如上图

属性绑定指令

    v-bind:属性=“指令值”
    :属性=“指令值”

<div id="app">
			<!-- 绑定属性指令用v-bind v-bind指令 :title参数 鼠标放上去-->
			<p v-bind:title="title">{{msg}}</p> 
			
		</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){  
					return{
						msg:"你好vue!",
						title:"看见我的人,一生平安!",
						
					}
				}
			})
		</script>

条件渲染

    v-show
css方式隐藏
  v-if
v-else-if
v-else
  频繁切换用v-show
一次性切换用v-if
v-show隐藏是通过css的方式隐藏节点

列表渲染

    v-for="item in list"
//list要遍历的数组
//item当前遍历的项目
    v-for="(item,index) in list"
//index当前遍历项的索引 从0开始
    使用v-for 务必
v-bind:key=""
:key="值"

值必须是唯一
添加key属性可以优化v-for的渲染
让vue更好识别当前渲染的节点
特别是在排序，过滤等操作时
不建议key的值使用循环的索

<div id="app">
			<p v-for="item in list">{{item}}</p>
			<p v-for="(item,index) in list">{{index+1}}-{{item}}</p>
			<!-- key优化vue的渲染(要求是唯一)推荐使用:key优化 -->
			<p v-for="(item,index) in list" :key="index">{{index+1}}-{{item}}</p>
			<h3 v-for="(item,index) in users" :key="item.name">姓名:{{item.name}},
			    年龄:{{item.age}}
			</h3>
			<p v-for="(item,index) in 10">{{item}}</p>
			
		</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					list:["vue","react","angular"],
				users:[{
					name:"小李",age:18
				},
				{name:"小王",age:28},
				{name:"小赵",age:22}
				]
				}
				})
		</script>

事件指令

    v-on:事件类型="响应函数"
v-on:click="say()"

事件的简写
    @click="say()"

行内事件响应

    @click="num++"
 

<div id="app">
			<!-- v-on事件指令:click事件参数 -->
			<button type="button" v-on:click="num++">
				{{num}}
			</button>
			<!-- @click 是v-on:click的简写 -->
			<button type="button" @click="num+=500">
				{{num}}
			</button>
			<button type="button" @click="say(6)">
				点我
			</button>
			<button type="button" @click="say(3)">
				点我点我
			</button>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					num:1,
				},
				methods:{
					say(n){
						alert("欢迎回来,牛**");
						//this当前new Vue出来的实例
						this.num+=n;
					}
				}
			})
		</script>

    事件修饰符

.stop阻止事件冒泡
.pervent阻止默认事件
.once只执行一次
@click.stop.once.prevent="num++"
事件的修饰符可以同时写多个

<div id="app">
			<p @click="pclick()">
				<!-- stop修饰符阻止事件冒泡 -->
				<button type="button" @click.stop="bclick()">按钮</button>
				<!-- prevent 阻止默认事件修饰符 -->
				<a href="https://www.baidu.com" @click.stop.prevent="aclick()">百度</a>
			</p>
			<!-- once 只监听一次 -->
			<h3 @click.once="hclick()">嗨</h3>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					num:1,
				},
				methods:{
					pclick(){alert("p被点击了")},
					bclick(){alert("按钮被点击了")},
					aclick(){alert("a标签被点击了")},
					hclick(){alert("嗨")},
				}
			})
		</script>