vue遵循MVVM模式,编码简洁, 体积小, 运行效率高, 移动/PC端开发,借鉴angular的模板和数据绑定技术,借鉴react的组件化和虚拟DOM技术。
vue包含一系列的扩展插件(库):
* vue-cli: vue脚手架
* vue-resource(axios): ajax请求
* vue-router: 路由
* vuex: 状态管理
* vue-lazyload: 图片懒加载
* vue-scroller: 页面滑动相关
* mint-ui: 基于vue的组件库(移动端)
* element-ui: 基于vue的组件库(PC端)
简单的引入使用vue方法
{{ message }} 这里是文本插值,用声明的变量代替即可
var vm = new Vue({ //new一个实例
el: '#app', //挂载位置
data: {
message: 'Hello Vue!'
}
})
还有v-text和v-html
//这里会把ht声明的html代码块渲染出来,里面不能再加别的了。
你好
//把声明的name内容渲染到第一个span里面,同样里面不能再加别的。
v-bind
用于给元素绑定属性,v-bind:属性名="表达式"
看title
{{name}}
{{name}}
{{name}}
属性名可以是声明的变量,可以是表达式
后面的表达式可以是声明的变量,也可以是表达式
v-on
用于绑定事件方法
v-on:事件名=“函数方法表达式”
methods:{
change(){ console.log("gaibianle"); }
}
{{fn()}}
//页面加载即执行,会打印123
fn(){ console.log(123); } //methods里面定义的方法
方法中的this都指向实例vm
//简写模式,v-on:简写为@
v-model双向数据绑定
{{name}}
//懒惰模式
数据双向绑定,可以使用在
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
This will never change: {{msg}}
comment
{{msg}}
v-for渲染列表指令
语法v-for="item in list",需要生成几个li,就把作用到li上
list:["leo","momo","miaov","zhangsen"],//定义一个数组list或obj对象
obj:{
a:1,
b:2,
c:3
}
- 第{{index+1}}个是{{value}}
//将list内容渲染到li上,可以没有index下标。
- 第{{index+1}}个{{key}}--{{value}}
//也可以遍历obj对象,注意参数顺序
下面是一个简易留言板,一个input下面一个ul li
data:{
list:[
{id:001,
val:"今天心情真不错。"},
{id:002,
val:"今天心情糟糕透了!"}
],
//预定义一个list,里面是一个对象,对象里包含id和留言内容
shuru:"",
//预定义一个空的输入字段,用v-model和input绑定
},
methods:{
send(){
this.list.push({
id:Date.now(),
val:this.shuru
});
this.shuru=""
}
}
//点击发送发生事件,将input内输入的数据this.shuru用push到list数组最后面,
//注意写法格式,id用时间戳,val:this.shuru,最后将输入内容清空
v-if和v-show
当需要频繁切换显示隐藏时用v-show,减少页面渲染造成的资源浪费。
if
show
check:true//给一个默认true,点击选择按钮更改真假,同时控制下面元素的显示。
1). el
指定dom标签容器的选择器
Vue就会管理对应的标签及其子标签
2). data
对象或函数类型
指定初始化状态属性数据的对象
vm也会自动拥有data中所有属性
页面中可以直接访问使用
数据代理: 由vm对象来代理对data中所有属性的操作(读/写)
3). methods
包含多个方法的对象
供页面中的事件指令来绑定回调
回调函数默认有event参数, 但也可以指定自己的参数
所有的方法由vue对象来调用, 访问data中的属性直接使用this.xxx
4). computed
在 computed 属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
包含多个方法的对象
对状态属性进行计算返回一个新的数据, 供页面获取显示
一般情况下是相当于是一个只读的属性
利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化
如何给对象定义get/set属性
在创建对象时指定: get name () {return xxx} / set name (value) {}
对象创建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})
5). watch
包含多个属性监视的对象
分为一般监视和深度监视
通过vm对象的$watch()或 watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
通过 getter/setter 实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次 getter 计算
xxx: function(value){}
xxx : {
deep : true,
handler : fun(value)
}
另一种添加监视方式: vm.$watch('xxx', function(value){})
4. 过渡动画
利用vue去操控css的transition/animation动画
模板: 使用包含带动画的标签
css样式
.fade-enter-active: 进入过程, 指定进入的transition
.fade-leave-active: 离开过程, 指定离开的transition
.xxx-enter, .xxx-leave-to: 指定隐藏的样式
编码例子
.xxx-enter-active, .xxx-leave-active {
transition: opacity .5s
}
.xxx-enter, .xxx-leave-to {
opacity: 0
}
hello
5. 生命周期
vm/组件对象
生命周期图
主要的生命周期函数(钩子)
created() / mounted(): 启动异步任务(启动定时器,发送ajax请求, 绑定监听)
beforeDestroy(): 做一些收尾的工作
6. 自定义过滤器
对需要显示的数据进行格式化后再显示
moment.js库的使用
{{date | geshi}}
Vue.filter("geshi",function (val) {
return moment(val).format("YYYY-MM-DD HH:mm:ss");
});
2). 编码
1). 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
2). 使用过滤器
{{myData | filterName}}
{{myData | filterName(arg)}}
过滤器对要显示的数据进行特定格式化后再显示
并没有改变原本的数据, 可是产生新的对应的数据
7. vue内置指令
v-text/v-html: 指定标签体
* v-text : 当作纯文本
* v-html : 将value作为html标签来解析
v-if v-else v-show: 显示/隐藏元素
* v-if : 如果vlaue为true, 当前标签会输出在页面中
* v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
* v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
v-for : 遍历
* 遍历数组 : v-for="(person, index) in persons"
* 遍历对象 : v-for="value in person" $key
v-on : 绑定事件监听
* v-on:事件名, 可以缩写为: @事件名
* 监视具体的按键: @keyup.keyCode @keyup.enter
* 停止事件的冒泡和阻止事件默认行为: @click.stop @click.prevent
* 隐含对象: $event
v-bind : 强制绑定解析表达式
* html标签属性是不支持表达式的, 就可以使用v-bind
* 可以缩写为: :id='name'
* :class
* :class="a"
* :class="{classA : isA, classB : isB}"
* :class="[classA, classB]"
* :style
:style="{color : color}"
v-model
* 双向数据绑定
* 自动收集用户输入数据
{{msg}}
事件修饰符,按键修饰符
1. 绑定监听
2. 事件修饰符
百度一下
3. 按键修饰符
ref获取dom节点
这是一段话
methods:{
changeMsg(){
this.$refs.pp.innerHTML="修改了"
}
}
9,v-for的使用
基础使用
-
{{ item.message }}
v-for 还支持一个可选的第二个参数为当前项的索引
-
{{ index }} - {{ item.message }}
也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法
你也可以用带有 v-for 的 标签来渲染多个元素块
- {{ item.msg }}
对象迭代 v-for,通过一个对象的属性来迭代。
-
{{ value }}
对象迭代 v-for也可以提供第二个的参数为键名
{{ key }} : {{ value }}
对象迭代 v-for第三个参数为索引:
{{ index }}. {{ key }} : {{ value }}
例子:
-
{{index}}——{{key}}——{{value}}
结果如下
0——name——张三
1——age——26
整数迭代 v-for,v-for 也可以取整数。
{{ n }}
结果:1 2 3 4 5 6 7 8 9 10