VUE2
简介
-
用于构建用户界面的前端框架;简化DOM操作;响应式数据驱动(https://cn.vuejs.org)
-
vue 框架的特性:
-
数据驱动视图:vue 会监听数据的变化,从而自动重新渲染页面的结构
-
双向数据绑定:在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动把用户填写的内容同步到数据源中
-
第一个实例:1.导入开发版本vue.js;
2.创建实例,设置el和data属性;
3.使用简洁的模块语法把数据渲染到页面上
-
el:挂载点,类选择器等都可以,建议id选择器;支持双便签除了html和body; 作用是管理el选项命中的元素及其内部的后代元素。
-
data:数据对象,可以是数组,索引等,遵循JS
-
methods:函数方法
-
computed:计算属性指的是通过一系列运算之后,最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。 -
methods和computed: 可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
vue 的指令与过滤器
内容渲染指令
-
v-text:设置标签的文本值;部分文本改变使用{{}},字符串拼接使用‘+’
-
v-html:设置标签的innerHTML(普通文本和v-text无异)
-
{{ }}
属性绑定指令
-
v-bind:为元素绑定属性,可省略v-bind;
例如 : :src="" :title="" :class=""
事件绑定指令
-
v-on:为元素绑定事件,v-on:事件名(如v-on:click、v-on:input、v-on:keyup等);
-
在vue实例中的methods:{}写方法;
-
可以使用‘@’替换v-on;
-
通过this关键字访问data数据。
-
函数()里可传递自定义参数, 另外‘$event’ 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event,如果默认的事件对象 e 被覆盖了,则可以手动传递一个 $event。例如:
<button @click="add(3, $event)"></button> methods: { add(n, e) { // 如果在方法中要修改 data 中的数据,可以通过 this 访问到 this.count += 1 } }
-
事件修饰符限制事件,来辅助程序员更方便的对事件的触发进行控制,常见如下
- 按键修饰符,监听键盘事件,例如@keyup.enter等
双向绑定指令
- v-model:获取和设置表单元素的值(双向数据绑定);同步更新
- v-model 指令的修饰符:
- .number:自动将用户输入值转为数值类型
- .trim:自动过滤用户首尾空白字符
- .lazy:在改变后更新,过程不更新
<div id="app">
<input type="text" v-model.number="n1">+
<input type="text" v-model.number="n2">=
<span>{{n1 + n2}}</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
n1: '',
n2: '',
}
})
</script>
条件渲染指令
- v-show:根据表达值的真假,切换元素的显示和隐藏(添加或移除display:none属性,适合频繁切换)
- v-if 同上(创建或移除dom元素);可以用 v-else 指令给 v-if 添加一个 “else” 块;v-else-if,用作v-if的else-if块
列表渲染指令
-
v-for:基于一个数组生成一个列表结构,v-for 指令需要使
用 item in items 形式的特殊语法,items 是待循环的数组,item 是被循环的每一项。
-
v-for 指令还支持一个可选的第二个参数,即当前项的索引。语法格式为 (item, index) in items
-
为了提高渲染的性能,需要为每一项提供唯一的key属性,注意事项:
- key 的值只能是字符串或数字类型
- key 的值不能重复
- 建议把数据项 id 属性的值作为 key 的值
实例+点击切换图片:
<div id="app">
<p>{{ message }}</p>
//v-text的使用
<p v-text="message+'!!'" ></p>
//v-html,v-show
<p v-html="itheima" v-show="isTrue" ></p>
//v-on,可以用‘@’替换
<input type="button" value="单击" @click="doit"><br>
//v-bind绑定属性,可以用:号替换
<img :src="imgArr[index]" :title="imgTitle"><br>
//实现点击切换图片
<input type="button" value="上一张" @click="prev">
<input type="button" value="下一张" @click="next"><br>
<ul>
//v-for生成列表
<li v-for="(it,index) in arr">
{{index+1}}:{{it}}
</li>
</ul>
</div>
//vue实例中:
<script>
var app = new Vue({
el:"#app",
data:{
message:"帅帅帅!",
itheima:"<a href='http://www.itheima.com'>黑马</a>",
isTrue:true,
imgTitle:"wife",
imgArr:[
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
"./images/04.jpg",
],
index:0,
arr:["iii","assa","asd"]
},
methods:{
doit:function(){
this.message="lizhi",
this.isTrue=!this.isTrue
},
//点击上一张切换图片
prev:function(){
if(this.index<=0){
this.index=this.imgArr.length-1
}else{
this.index--
}
},
//点击下一张切换图片
next:function(){
this.index=(this.index+1)%this.imgArr.length
}
}
})
</script>