目录
1.Vue
vue是JavaScript的一个框架——【JavaScript的库】
Vue的创建
<div id="app">
<!-- 插值表达式 -->
<!-- <h1>{{msg}}</h1>{{ msg }} -->
{{user.msg}} ---{{user.name}} --- {{user.password}}
<hr>
{{lists[1]}}
<hr>
{{users[0].name}}---{{users[0].age}}
<hr>
{{msg.substring(0,4)}}
</div>
<script src="vue.js"></script>
<script>
// 1.创建vue的实例
const app = new Vue({
// el是用来给Vue实例一个作用域
el:"#app",
// data是定义数据
data:{
// 用来给Vue定义一些相关的数据
msg:"欢迎使用vue",
// 用来给Vue定义对象
user:{
msg:"hello vue",
name:"admin",
password:"123456"
},
// 用来给Vue定义数组
lists:['北京','上海','广州','深圳','杭州'],
// 用来给Vue定义对象的数组
users:[{name:"小强",age:"25"},{name:"小虎",age:"18"}],
},
})
</script>
-
【Vue2的小bug】——
-
插值闪烁
-
<h1>{{msg}}</h1> -
网速较慢时可能后加载出来
-
-
解决办法
-
<h1 v-text="msg"></h1> <h1 v-html="aaa"></h1>
-
-
事件
-
事件的定义——【v-on:click , @click】
-
<input type="button" value="通过vue事件来改变年龄+1" v-on:click="addage"> <span>年龄:{{age}}</span> <input type="button" value="通过vue事件来改变年龄-1" @click="subage">
-
-
事件里的函数执行
-
//定义函数 methods:{ addage:function(){ // this代表的是整个Vue实例 this.age++; }, subage:function(){ if(this.age>0){ this.age--; } } }
-
面试题
v-if与v-show的区别
- v-if直接操作DOM，底层
- v-show是通过css控制DOM元素
属性的绑定
- 【v-bind：或者：】
<div id="ad">
<--!获取元素-->
<img v-bind:src="src" alt="" :title="t" @click="ddd()">
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: "#ad",
data: {
src: "../2022-8-26/14.png",
a: 1
},
methods: {
ddd() {
if (this.a == 1) {
this.src="../2022-8-26/142.jpeg"
this.a=2
}else if(this.a==2){
this.src="../2022-8-26/18.jpeg"
this.a=3;
}else{
this.src="../2022-8-26/14.png"
this.a=1
}
},
}
})
</script>
遍历
-
v-for写在哪一个标签里，就会生成多个对应的标签
-
在使用v-for时候：一定要加key用来给vue内部提供重用和排序的唯一的值
-
<ul> <li v-for="(value,index) in user"> {{index}}---{{value}} </li> </ul>
双向绑定
-
双向绑定：
-
HTML部分发生变化，Vue实例中对应的属性也会发生变化
-
Vue中发生变化，HTML中同样发生变化
-
<div id="ad"> <input type="text" v-model="message"> <hr> <!-- <span>{{message}}</span> --> <hr> <button @click="changevalue">通过改变js中message的值改变文本框的值</button> <hr> <input type="radio" name="gender" v-model="gender" value="m">男 <input type="radio" name="gender" v-model="gender" value="w">女 <hr> <input type="checkbox" v-model="hobby" checked value="a">A <input type="checkbox" v-model="hobby" checked value="b">B <input type="checkbox" v-model="hobby" checked value="c">C <button @click="show">发</button> <hr> <select v-model="address"> <option value="x" >x</option> <option value="y" >y</option> <option value="z" >z</option> </select> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: "#ad", data: { message: null, gender:"w", hobby:[], address:"x" }, methods: { changevalue(){ this.message=prompt(); }, show(){ alert(this.address) } } }) </script>
-
-
总结
- 使用v-model指定可以实现数据的双向绑定
- 所谓双向绑定，表单中的数据和Vue的实例中data的数据变化是同步的
-
MVVM架构：双向绑定机制
- Model：数据
- View：页面，页面展示数据
- VM：ViewModel 监听器
注意事项
- 双向绑定