什么是vue?
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
无论是简单还是复杂的界面，Vue 都可以胜任。
创建实例，插值表达式
获取数组中的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
</html>
mothods: 中定义方法 ， v-on:click @click 两种方法定义单击事件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-for -->
<!--
v-for写在哪一个标签中，就会生成多个对应的标签
注意：
在使用v-for的时候，一定要加入:key，用来给vue内部提供重用和排序的唯一的值
-->
<span v-for="(value,key,index) in user">
{{index}} --- {{key}} --- {{value}}
</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>
</html>
v-model ： 实现数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
双向绑定：
1、HTML部分发生变化，Vue实例中对应的属性也会变化
2、Vue中发生变化，HTML中同样变化
-->
<div id="app">
<!--
总结：
1、使用v-model指定可以实现数据的双向绑定
2、所谓的双向绑定，表单中的数据和Vue实例中data的数据变化是同步的
MVVM架构：双向绑定机制
Model：数据
View：页面，页面展示数据
VM：ViewModel 监听器
-->
<input type="text" v-model="message">
<span>{{message}}</span>
<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>
</body>
</html>
Original: https://www.cnblogs.com/ychptz/p/16631430.html
Author: 阿萨德菩提子
Title: 2022-8-27 vue 第一天
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/611127/
转载文章受原作者版权保护。转载请注明原作者出处！