Vue 的构建
const app = new vue({
//用于挂载要管理的元素
el:"#app",
data:{//构造数据
name:'老王',
age:'50'
},
methods:{//构造方法
add(){
},
sub(){
}
}
filters :{//定义过滤器
showPrice(price){
return "¥" + price.toFixed(2);
}
},
computed: {//计算属性,最主要的是比函数构造方法多看缓存,在执行计算时性能更好
reverseMsg() {
console.log('computed')
return this.msg.split('').reverse().join('')
}
},
watch:{ //监听属性
// key: value
// key - 要监听的数据的名字
// value - 是监听的数据发生变化之后，会触发的函数，这个函数会自动接受到2个参数
// newVal 新数据, oldVal旧数据
firstName (newVal, oldVal) {
console.log(newVal, oldVal)
this.fullName = `${newVal} ${this.lastName}`
},
lastName (newVal, oldVal) {
this.fullName = `${this.firstName} ${newVal}`
},
{ //深度监听的方法 handler
handler(newVal, oldVal) {
console.log('obj修改了')
},
deep: true,//深度监听
//强行默认执行一次
immediate: true
}
},
components:{//组件构造器
cpn:{//注册组件
template :`
<div>张三</div>
<div>李四</div>`
}
}
})
基础语法
//1. 监听事件
v-on:click='aa';
//2. 让标签中的内容不随着变量的改变而改变
v-once
// 3. 解析标签中的url
v-html
// 4. 把标签中的东西原封不动的展示不解析
v-pre
// 5. 蒙板,在vue解析之前存在,在vue解析之后消失
v-cloak
// 6. 绑定属性,在绑定的对象中如:老王:true/false会根据布尔值来决定是否显示
v-bind
// 7. 在vue解析之前会存在,在vue解析之后会消失
v-cloak
语法糖
v-on;的语法糖 @;
v-bind; 的语法糖 :
修饰符
v-on
@click.stop阻止冒泡
@click.prevent阻止默认事件
@keyup.enter键盘事件监听
v-model
1. lazy v-model.lazy//失去焦点或者回车的时候更新
2. number v-model.number//转化为数字类型
3. trim v-model.trim//去除空格
class 与 style
<div id="app">
<!-- id只能有一个后面的覆盖前面的 -->
<p v-bind:id="msg" id="box" >我是一个屁</p>
<!-- class可以多个存在 -->
<p class="box" :class="msg">我是一个屁</p>
<!-- style也能有多个存在 -->
<p style="color: red;" :style="myStyle">我是一个屁</p>
<hr>
<!--
二、class 与 style 可以提供 对象的写法
-->
<!-- key - class 类名，value - 控制这个类名是否要存在的条件 为true 就存在-->
<p :class="{'box': msg, 'box1': !msg}">我是一个屁</p>
<p :style="{ 'fontSize': number + 'px', 'color': color }">我是一个屁</p>
<hr>
<!--
三、class 与 style 可以提供 数组的写法
-->
<p :class="[msg, 'box', {'box1': msg}]">我是一个屁</p>
<p :style="[myStyle,{'fontWeight': 'bold'}]">我是一个屁</p>
</div>
if 判断
v-if ='true' //条件判断 true显示 false 不显示
v-else // v-if 的false执行
v-else-if
//if后面直接跟表达式
<p v-if="fenshu >= 90">优</p>
<p v-else-if="fenshu >= 80">良</p>
<p v-else>差</p>
用法和js中发if else 一样
label 与 input 中的value复用问题,愿意是虚拟DOM
不想复用就用不同的key值要复用就用相同的key值
<label for="add">用户名</label>
<input type="text" id="add" key="add">
<label for="bdd">用户名</label>
<input type="text" id="bdd" key="add">
v-if 与 v-show 的区别
v-if 不显示是被删除了 标签删除掉了
v-show 不显示是因为隐藏 ,true显示 false 隐藏
遍历数组
v-for//变量数组
v-for='item in Array'//item 遍历的每个元素
v-for = '(item, index) in Array' //index下标值
遍历对象
//遍历对象,item表示每个元素的value值
v-for ="item in obj"
v-for = '(value,key) in obj'
v-for = '(value,key,index) in obj'
遍历数字
<!-- 数字 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]-->
<ul>
<li v-for="(item, index) in 10">
{{ item }} - {{ index }}
</li>
</ul>
1 - 0
2 - 1
3 - 2
4 - 3
5 - 4
6 - 5
7 - 6
8 - 7
9 - 8
10 - 9
数组的更新检测
- 数组的变异方法
- push() 尾部增加
- pop() 尾部删除
- unshift() 头部增加
- shift() 头部删除
- splice() 数组高级的一些方法
- sort() 排序
- reverse() 反装
但是：
- 通过数组的下标去操作修改的话，页面将不会更新
- 直接修改数组的长度， 页面也不会更新
如果解决：
第一种- Vue.set(需要修改的数组, 下标, 修改为什么值)
- vm.$set(需要修改的数组, 下标, 修改为什么值)
第二种
vm.list.splice(1)
对象的更新检测
问题
对一个对象添加一个之前不存在的属性的时候，页面不更新Vue.set(需要修改的对象,key, value)
vm.$set(需要修改的对象,key, value)
v-model 双向绑定
在input 输入框改变的时候变量add也会改变,变量add改变式input的value也改变
<input type="text" v-model="add">
<h2>{{add}}</h2>
v-model结合radio使用 radio单选框 input type:radio name一样只能选一个
v-model结合 checkbox使用
<label for="ap">
<input type="checkbox" id="ap" v-model="isadd">
</label>
<h2>{{isadd}}</h2>
在选择的时候h2打印选择的
列
<style>
.active{
background: red;
}
</style>
<body>
<div id="app">
{{msg}}
<!-- v-model 是双向绑定,显示数据会更改,data中数据也会更改 -->
<input type="text" v-model="msg">
<!-- 在v-bind指令绑定下属性也可以使用data值 -->
<p :title="msg">你是一个屁</p>
<ul>
<!-- item 是数组中的每个元素 v-for指令是遍历 -->
<li v-for="item in list">{{item}}</li>
</ul>
<!-- v-if 判断 v-else v-else-if 用发和原生一样的 值为true显示 false删除 -->
<button v-if="isLogin" @click="isLogin = !isLogin">退出登录</button>
<button v-else @click="isLogin = !isLogin ">登录</button>
<br/>
<button
:class="{'active':curTab === 'home'}"
@click="fn('home')"
>首页</button>
<button
:class="{'active':curTab === 'list'}"
@click="fn('list')"
>列表页</button>
<button
:class="{'active':curTab === 'about'}"
@click="fn('about')"
>详情页</button>
<hr>
<div v-if="curTab ==='home' ">
首页内容
</div>
<div v-if="curTab ==='list' ">
列表页内容
</div>
<div v-if="curTab ==='about' ">
详情页内容
</div>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'hello',
list:['老王','老李','老张','老宋'],
isLogin: true,
curTab :'home'
},
methods:{
fn(str){
this.curTab = str;
}
}
});
</script>
网友评论