vue基础(1)
简介
- 他是一个渐进式的框架(就是一开始不需要你完全掌握它的全部功能特性，可以后逐渐增加功能。没有多做职责之外的事情)
- 他是一个构建用户界面的框架;
- 他是一个轻量级的MVVM（Model-View-ViewModel）;
作用
不用直接操作DOM(虚拟dom)就能改变里面的数据;
官网
https://cn.vuejs.org/v2/guide/
安装(两种方式):
- 第一种.script直接引入
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 第二种.下载vue.js引入
<script src="./vue.min.js"></script>
使用:
1.先引入
2. 创建一个 Vue 实例(每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue实例.
var vm = new Vue({
// 选项
})
3.实例化vue对象
let vm =new Vue({
el:"" //挂载
data:{
//存放数据
myname:'lisi' //变量，状态
},
methods{
//方法
aa:function(){
}
}
})
<div id="box">
{
{
name}}
</div>
<script src="./vue.min.js"></script>
<script>
var Vue = new Vue({
el:"#box",
data:{
name:"张三"
}
})
</script>
指令:
.直接使用{
{
}} 将数据解释为普通文本，而非html代码
v-html : 可以解析标签
v-text : 只能解析文本,不能解析标签
v-bind : 绑定属性 简写: :
v-once :执行一次性地插值，当数据改变时，插值处的内容不会更新
v-on:绑定事件 简写 :@
v-show/v-if: 显示/隐藏
v-pre: 不解析,原样输出
v-directive :自定义属性
v-for : 列表循环
v-solt:插槽
方法methods:
methods:{
方法名:function(){
},
方法名(){
}
}
用{ {}}调用这个方法 要写() { {aa()}}
事件触发 @click=‘aa’ 可以有()也可以没有
如果需要传参数,加上() 把$event这个特殊参数传进去可以获取事件对象
计算属性(computed)
computed:{
bb(){
return this.arr.filter(a=>a.indexOf(this.search) > -1)
},
cc:{
//调用计算属性时自动触发get方法,修改计算属性时自动触发set方法
set(a){
console.log('我是set'+"接收的内容"+a+"接收的内容")
},
get(){
console.log('我是get')
return this.arr.filter(a=>a.indexOf(this.search) > -1)
}
}
},
注意点 :
-
计算属性有缓存
-
直接{ {}}调用不用写()
-
当计算属性所依赖的属性发生变化时他会重新计算一次
计算缓存:
计算属性是基于它们的依赖进行缓存的;
计算属性只有在它依赖的属性发生改变时才会重新计算;
计算属性 watch
watch监听
watch:{
name(newvalue,oldvalue){
//计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值
// this.age
// console.log('name属性发生变化了')
console.log(newvalue,oldvalue)
}
注意点:
- 注意名字 起的名字必须和监听的属性一致
- 触发条件.当你监听的属性发生变化时,会自动调用对应监听方法
- 使用场景 异步处理 开销比较大的运算