2022-8-27第一组孙乃宇Vue
htmlcss--->javascript--->JQuery
---->vue,react,angular
一个JavaScript库
vue也可以说是JavaScript框架。
尤雨溪
Vue2
Vue3
创建一个Vue实例
<div id="app">
<!-- 插值表达式 -->
<h1>{{msg}}</h1>
</div>
<script>
1.创建一个vue实例
const app = new Vue({
//el用来给Vue实例一个作用域
el: "#app",
data: {
//用来给Vue定义一些相关的数据
msg: "欢迎使用Vue",
},
});
</script>
数据的获取和遍历
<body>
<div id="app">
<h1>{{user.msg}} --- {{user.name}} --- {{user.password}}</h1>
<h1>{{lists[0]}}---{{lists[3]}}---{{lists[4]}}</h1>
<h1>{{users[0].name}} --- {{users[0].age}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
user: {
msg:"hello Vue",
name :"admin",
password: "123456",
},
lists: ["北京","上海","广州","深圳","杭州"],
users: [{name:"小强",age:25},{name:"小红",age:18}]
},
});
</script>
</body>
插值闪烁
在Vue中使用
<body>
<div id="app">
<!-- 插值闪烁 -->
<h1>123{{msg}}</h1>
<!-- 不会有插值闪烁 -->
<h1 v-text="msg">123</h1>
<h1 v-html="aaa"></h1>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg:"<em>helle Vue</em>",
aaa: "<em>hello!!!</em>"
},
});
</script>
</body>
年龄改变
<body>
<div id="app">
<h1>年龄：{{age}}</h1>
<input type="button" value="通过Vue的事件改变年龄每次+1" v-on:click="addage">
<input type="button" value="通过Vue的事件改变年龄每次-1" @click="subage">
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg:"hello Vue",
age: 23,
},
methods: {
addage: function() {
// 想办法拿到data中的age属性，让它自增
// this代表的是整个的vue实例
this.age ++;
},
subage() {
this.age --;
}
}
});
</script>
</body>
v-if v-show
<body>
<div id="app">
<!--
面试题：99.99999999%
v-if直接操作DOM元素，底层
v-show是通过css控制DOM元素
-->
<h1 v-if="true">欢迎光临</h1>
//当v-if为ture时，显示信息
//当v-if为false时，不显示信息
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg:"hello Vue",
},
});
</script>
</body>
图片切换
<body>
<div id="app">
<img :src="src" width="300" @click="change">
</div>
<script src="js/vue.js"></script>
<script>
//图片地址为：img/1.jpg到img/5.jpg
const app = new Vue({
el: "#app",
data: {
msg:"hello Vue",
src :"img/1.jpg",
},
methods: {
change() {
let imgname = this.src;
let s = imgname.split(".");
let ext = s[1];
let pre = s[0].split("/");
let dir = pre[0];
let na = parseInt(pre[1]);
na ++;
if(na > 5) {
na = 1;
}
this.src = dir + "/" + na + "." + ext;
}
},
});
</script>
</body>
v-for
v-for写在哪一个标签中，就会生成多个对应的标签
注意：在使用v-for的时候，一定要加入:key，用来给vue内部提供重用和排序的唯一的值
<body>
<div id="app">
<span v-for="(value,key,index) in user">
{{index}} --- {{key}} --- {{value}}<br>
</span>
<ul>
<li v-for="(value,index) in lists">
{{index}} --- {{value}}
</li>
</ul>
<ol>
<li v-for="(u,index) in users" :key="u.id">
{{index}} --- {{u.name}} --- {{u.age}}
</li>
</ol>
<!-- <ol>
<li v-for="(value,key,index) in ((user) in users)">
{{index}} --- {{key}} --- {{value}}
</li>
</ol> -->
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
user:{name:"小强",age:23},
lists: ["北京","上海","广州","深圳","杭州"],
users: [{name:"小强",age:25},{name:"小红",age:18}]
},
});
</script>
</body>
双向绑定：
1、HTML部分发生变化，Vue实例中对应的属性也会变化
2、Vue中发生变化，HTML中同样变化
<body>
<div id="app">
<input type="text" v-model="message">
<br>
<span>{{message}}</span>
<br>
<button @click="changeValue">通过改变JS中message的值改变文本框的值</button>
<hr>
<input type="radio" name="gender" value="m"
v-model="gender">男
<input type="radio" name="gender" value="w"
v-model="gender">女
<hr>
<input type="checkbox" name="hobby" value="a" v-model="hobby">A
<input type="checkbox" name="hobby" value="b" v-model="hobby">B
<input type="checkbox" name="hobby" value="c" v-model="hobby">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>
<button @click="show">查看</button>
<input type="file">
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:'',
gender:'w',
hobby:[],
address:'z',
},
methods: {
changeValue() {
this.message = prompt("请输入：");
},
show() {
// console.log(this.hobby);
console.log(this.address);
}
},
});
</script