一、初识vue
MVVM模型:Model View ViewModel
<!-- 准备好一个容器 -->
<div id="root">
<h1>hello world,{{name}}</h1>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 创建vue实例
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务
//data中用于存储数据,数据供el所指定的容器所使用
data: {
name: 'hhh'
}
})
</script>
容器与实例之间一一对应
el也可以写成v.$mount挂载
const v=new Vue({
//el: '#app',
data: {
name: 'hello'
}
})
v.$mount('#app')
data也可以写成函数型
data() {
return {
name: 'hello'
}
}
二、vue语法模板
<h1>hello world,{{name}}</h1>
<a v-bind:href="url">点我实现跳转</a>
三、vue数据绑定
单项数据绑定:<input type="text" :value="name">
双向数据绑定:<input type="text" v-model="name">
数据代理
let number=18
let person = {
name: 'zhangsan',
sex: 'nan',
// age:18
}
Object.defineProperty(person, 'age', {
/* value: 18,
numerator: true,//属性是否可以枚举
writableStream: true,//属性是否可以被修改
configurable: true//属性是否可以被删除 */
get() {
return number
},
set(value) {
console.log('有人修改了age属性');
number=value
}
})
console.log(person);
四、Vue事件处理
1.事件处理方法
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'hhhh'
},
methods: {
showInfo(event) {
alert(111)
}
},
})
</script>
2.事件修饰符
.prevent | 阻止默认事件 |
.stop | 阻止事件冒泡 |
.once | 事件只触发一次 |
.capture | 使用事件的捕获方式 |
.self | 只有event.target是当前操作的元素才是触发事件 |
.passive | 事件的默认行为立即执行,无需等待事件回调执行完毕 |
3.滚轮事件
- wheel鼠标滚轮事件
- scroll滚轮事件
4.键盘事件
回车enter 删除delete 退出esc 空格space 换行tab 上up 下down 左left 右right 切换大小写caps-lock
<input type="text" placeholder="按下回车提示输入" @keyup.enter="jp">
jp(e) {
console.log(e.target.value);
}
tab、alt、shift、meta键使用keydown
五、计算属性
所使用的属性不存在,要有通过原有属性计算,使用get,如果计算属性要被修改,必须写set函数去响应修改
<div id="root">
姓:<input type="text" v-model="firstName"><br /><br />
名:<input type="text" v-model="lastName"><br /><br />
<!-- 姓名:<span>{{fullName()}}</span> -->
姓名:<span>{{fullName}}</span>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
fullName:'张-三'
},
/*computed: {
fullName: {
//初次读取时,get就会被调用
get() {
return this.firstName + '-' + this.lastName
},
set(value) {
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
//简写形式,考虑读取不考虑修改时使用
/* fullName(){
return this.firstName + '-' + this.lastName
} */
}*/
watch: {
firstName(val) {
this.fullName = val + '-' + this.lastName
},
lastName(val) {
this.fullName = this.firstName + '-' + val
}
}
})
</script>
//切换天气案例
<div id="app">
<h2>今天天气很{{info}}</h2>
<button @click="isHot = !isHot">切换天气</button>
</div>
<script>
const vm1 = new Vue({
el: '#app',
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
/* changetq() {
this.isHot = !this.isHot
} */
},
})
</script>
六、监视属性(侦听属性)
<div id="app">
<h2>今天天气很{{info}}</h2>
<button @click="isHot = !isHot">切换天气</button>
</div>
<script>
const vm1 = new Vue({
el: '#app',
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
watch: {
isHot: {
immediate: true,//初始化时让handler调用
handler(newValue, oldValue) {
console.log('ishot被修改了', newValue, oldValue);
}
}
}
})
/* vm1.$watch('isHot', {
immediate: true,//初始化时让handler调用
handler(newValue, oldValue) {
console.log('ishot被修改了', newValue, oldValue);
}
}) */
</script>
1.深度监视
<div id="app">
<h2>a的值是:{{numbers.a}}</h2>
<button @click="numbers.a++">点我让a+1</button>
<h2>b的值是:{{numbers.b}}</h2>
<button @click="numbers.b++">点我让b+1</button>
<button @click="numbers={a:222,b:666}">彻底替换numbers</button>
</div>
<script>
const vm1 = new Vue({
el: '#app',
data: {
numbers: {
a: 1,
b: 1
}
},
watch: {
//监测多级结构中某个属性的变化
numbers: {
deep: true,
handler() {
console.log('ab被改变了');
}
}
}
})
</script>
简写形式
isHot(newValue, oldValue) {
console.log('ishot被修改了', newValue, oldValue);
},
vm1.$watch('isHot', function () {
console.log('ishot被修改了', newValue, oldValue);
})
2.vue.set()使用
<div id="app">
<h1>学校信息</h1>
<h2>名称:{{name}}</h2>
<h2>地址:{{address}}</h2>
<hr />
<h1>学生信息</h1>
<button @click="addSex">添加一个性别属性</button>
<h2>姓名:{{student.name}}</h2>
<h2 v-if="student.sex">性别:{{student.sex}}</h2>
<h2>年龄:真实年龄{{student.age.rage}},对外年龄{{student.age.sage}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'school',
address: 'xxx',
student: {
name: 'hhh',
//sex: '男',
age: {
rage: 40,
sage: 29
}
}
},
methods: {
addSex() {
//Vue.set(this.student, 'sex', '男')
this.$set(this.student, 'sex', '男')
}
},
})
</script>
删除数组中的某个元素
removeHbob() {
this.student.hobby = this.student.hobby.filter((h) => {
return h !== '抽烟'
})
}