vue学习笔记 - 模板语法、计算属性
2020-11-09 本文已影响0人
huxq_coder
vue学习笔记
官网：https://cn.vuejs.org/v2/guide/
1、vue体验
demo示例：
image.png
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>系统名称：{{title}}</h1>
<ul>
<li v-for="(item, i) in products">
名称：{{item.name}}，库存：{{item.stock}}
<button @click="remove(i)">删除</button>
</li>
</ul>
</div>
// 引入vue
<script src="./vue.min.js"></script>
<script>
<!-- 创建vue实例 -->
var vm = new Vue({
<!-- element -->
el: "#app",
<!-- 自定义数据 -->
data: {
title: "管理系统",
products: [
{ name: "iphone", stock: 1 },
{ name: "xiaomi", stock: 2 },
],
},
<!-- 自定义方法 -->
methods: {
remove(i) {
this.products.splice(i, 1);
},
},
});
</script>
</body>
</html>
vue实例中data介绍：https://cn.vuejs.org/v2/api/#data
模板语法
官网介绍：https://cn.vuejs.org/v2/guide/syntax.html
demo示例：
image.png
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>系统名称：{{title}}</h1>
<!-- “Mustache”语法 (双大括号) -->
<span>message: {{ msg }}</span>
<br>
<span v-once>once message: {{ msg }}</span>
<!-- 原始HTML -->
<br>
<p>Using mustaches: {{ rawHtml }}</p>
<span>Using v-html directive:</span>
<p v-html="rawHtml"></p>
<!-- v-bind -->
<div v-bind:id="dynamicId">v-bind</div>
<!-- 缩写 v-bind: => : -->
<div :id="dynamicId">缩写v-bind</div>
<!-- 实际DOM为：<div id="v-bind"></div> -->
<button v-bind:disabled="isButtonDisabled">Button</button>
<!-- v-if -->
<p v-if="seen">if 现在你看到我了</p>
<p v-else>else 现在你看到我了</p>
<!-- v-on -->
<button v-on:click="counter += 1">Add 1</button>
<!-- 缩写 v-on: => @ -->
<button @click="counter += 1">缩写 Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
<!-- v-model -->
<br>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<!-- 计算属性 -->
<p>firstName: {{ firstName }}</p>
<p>lastName: {{ lastName }}</p>
<p>计算属性 fullName: {{ fullName }}</p>
<p>方法 fullName: {{ getFullName() }}</p>
</div>
<script src="./vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
title: "管理系统",
products: [
{ name: "iphone", stock: 1 },
{ name: "xiaomi", stock: 2 },
],
msg: "“Mustache”语法 (双大括号)",
rawHtml: '<span style="color:red">html</span>',
dynamicId: "v-bind",
isButtonDisabled: false,
seen: false,
counter: 0,
message: "",
firstName: "hu",
lastName: "xq",
},
computed: {
fullName() {
console.log("+++");
return this.firstName + this.lastName;
},
},
methods: {
getFullName() {
console.log("---");
return this.firstName + this.lastName;
},
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.title + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
},
}
});
</script>
</body>
</html>
tips 计算属性和方法的区别
- 计算属性可以赋值，方法不行
- 计算属性会进行缓存，如果依赖属性不变，会直接使用缓存结果，不会进行重新计算
特殊属性：key
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>登录</h1>
<div v-if="loginType=='mobile'">
<label>手机号</label>
<input type="text" key="mobile"/>
</div>
<div v-else>
<label>邮箱</label>
<input type="text" key="email"/>
</div>
<div>
<button @click="loginType = loginType=='mobile'?'email':'mobile'">切换登录方式</button>
</div>
</div>
<script src="./vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
loginType: "mobile",
},
methods: {
},
});
</script>
</body>
</html>
