Vue基础语法(值相关)
2019-12-12 本文已影响0人
kevin5979
Mustache语法
- 基本用法演练：
<div id="app">
<h2>{{message}}</h2>
<h3>{{message + message}}</h3>
<div>标价为：{{price * 2}}</div>
<div>取数组下标值：{{arr[2]}}</div>
<div>算数运算：{{arr[2] + arr[3] * arr[4]}}</div>
<div>直接打印数组：{{arr}}</div>
<ul>
<li>姓名：{{obj.name}}</li>
<li>年龄：{{obj.age}}</li>
<li>身高：{{obj.high}}</li>
<li>直接打印对象：{{obj}}</li>
</ul>
<div>执行函数：{{fn(3)}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "我是标题",
price: 66,
arr: [1, 2, 3, 4, 5],
obj: {
name: "Kevin",
age: 18,
high: "1.88"
},
fn: num => num ** 3
}
})
</script>
Mustache语法
- Mustache语法总结：
1.基本模式 {{变量或函数}}，注意：Mustache语法插入的数据是响应式的
2.使用的变量或函数必须在 data 中定义，否则视为正常的字符串处理
3.{{变量或函数}} 必须插入到标签中
3.可以进行直接的算数运算，或字符串拼接，或者是表达式
4.不可以直接打印数组或对象
v-once语法
- 基本用法演练：
<div id="app">
<div v-once>{{message}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:"Hello VueJs"
}
})
</script>
v-once语法
- v-once语法总结：
1.该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。(解除响应式)
2.v-once写在标签内部
3.该指令后面不需要跟任何表达式
v-html语法
- 基本用法演练：
<div id="app">
<div>{{link}}</div>
<div v-html = "link"></div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
link: "<a href='https://www.baidu.com'>百度一下</a>"
}
})
</script>
v-html语法
- v-html语法总结：
1.v-html指令写在标签内部
2.v-html后面往往会跟上一个字符串
3.v-html会将字符串的html解析出来并且进行渲染
v-text语法和v-pre语法
- 基本用法演练：
<div id="app">
<div>{{link}}</div>
<div v-text = "link"></div>
<div v-pre>{{link}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
link: "<a href='https://www.baidu.com'>百度一下</a>"
}
})
</script>
v-text语法和v-pre语法
- v-text语法总结：
1.v-text 语法和v-html一样的书写在标签内部，但是不能解析html语法，其作用与Mustache一样
2.v-pre 语法和 v-once 一样，后面不需要加东西，其作用是取消Mustache的作用
v-bind语法
- 基本用法演练：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.show{
display: none;
}
.active{
color: red;
}
.showColor{
color: aqua;
}
.fontSize{
font-size: 18px;
}
.line{
display: block;
}
</style>
</head>
<body>
<div id="app">
<a v-bind:href="link">百度一下</a>
<img :src="logo" alt=""><br>
==================================绑定Class====================================
<h2 :class="{'show': isShow}">isShow</h2>
<h2 :class="{'active': isActive}" class="fontSize">isActive + fontSize</h2>
<span :class="{'active': isActive, 'line': isLine}">isActive</span> isLine
<h2 :class="['showColor','fontSize']">showColor + fontSize</h2>
==================================绑定Style====================================
<div :style="{color: setColor, fontSize: size + 'px'}">setColor + size</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
link: "https://www.baidu.com",
logo: "https://www.baidu.com/img/bd_logo1.png",
isShow: false,
isActive:true,
isLine:true,
setColor:"blue",
size:50,
}
})
</script>
</body>
</html>
v-bind语法
- v-bind语法总结：
1.主要作用：
动态绑定某些属性：如绑定标签内的href属性，src属性
动态绑定class和style：决定标签是否添加某些样式，绑定的class和style与原来的class、style不冲突，并且会合并属性值
2.v-bind缩写： v-bind: 可缩写为 ：
3.可以用对象和数组两种方式绑定class和style
例子：Mustache展示爱好
<div id="app">
<h2>我的爱好: {{loves[1]}} {{loves[3]}} {{loves[4]}} {{loves[5]}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
loves:["篮球","听音乐","喝咖啡","棒棒糖","阅读","写代码"]
}
})
</script>
我们发现这样写的话，html会变得很臃肿，不利于阅读和修改
于是，有另一种方法可以解决这个问题，使用computed
计算属性（computed）
- 基本用法演练：
<div id="app">
<h2>我的爱好: {{loves[1]}} {{loves[3]}} {{loves[4]}} {{loves[5]}}</h2>
<h2>我的爱好: {{myLoves}}</h2>
<strong>结算总价:￥{{totalPrice}} 元</strong>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
loves: ["篮球", "听音乐", "喝咖啡", "棒棒糖", "阅读", "写代码"],
shoppingCart: [
{ name: "离散数学", price: 30.00, count: 2 },
{ name: "数据结构与算法", price: 45.00, count: 3 },
{ name: "JavaScript权威指南", price: 139.00, count: 2 },
{ name: "概率论与数理统计", price: 35.00, count: 1 }
]
},
computed: {
myLoves() {
return this.loves[1] + " " + this.loves[3] + " " + this.loves[4] + " " + this.loves[5]
},
totalPrice(){
return this.shoppingCart.reduce((total,book)=>{
return total + book.price * book.count
},0)
}
}
})
</script>
computed语法
- computed语法总结：
1.作用：对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
计算属性(computed)的setter和getter
totalPrice: {
get() {
alert("调用了get方法")
return this.shoppingCart.reduce((total, book) => {
return total + book.price * book.count
},0)
},
set(){
alert("调用了set方法")
}
}
computed的setter和getter
- 将totalPrice改为上述代码，证明页面上调用totalPrice方法，就是调用了totalPrice的get函数
- 注意： computed中的方法具有缓存特性：即页面上多次调用totalPricef方法，get函数只会执行一次，这样就优化了性能，提升网页运行速度（methods 没有缓存特性）
事件监听（v-on指令）
- 基本用法演练：
<div id="app">
鼠标点击次数：<span>{{count}}</span><br>
<button v-on:click = "increase()">点击</button><br>
<button @click = "increase">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
count:0
},
methods: {
increase(){
this.count++
}
},
})
</script>
v-on语法
- v-on语法总结：
基本用法：写在标签内部，格式：v-on:事件名称 = "实现函数()"
简写：@事件名称 = "实现函数"，如果事件不需要传入参数，可以将函数的小括号省略
v-on的参数问题
<div id="app">
鼠标点击次数：<span>{{count}}</span><br>
<button @click = "increase">点击</button>
<button @click = "increase2(count)">点击2</button>
<button @click = "increase3(count,$event)">点击3</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
count:0
},
methods: {
increase(event){//调用时没有传入参数
this.count++
console.log(event)//输出为click事件对象
},
increase2(count){//调用函数时传入count
this.count++
console.log(count)//输出count值
},
increase3(count,event){
this.count++
console.log(count)//输出count值
console.log(event)//输出click事件对象
}
},
})
</script>
- 注意：当v-on调用事件函数，没有传入参数，默认参数为event对象，如果同时要传入数据和事件对象，则用 $event 作为形参传入
v-on的修饰符
<div id="app">
<!-- Vue提供了修饰符来帮助我们方便的处理一些事件 -->
<!-- 停止冒泡 -->
<button @click.stop="fn"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="fn"></button>
<!-- 串联修饰符 -->
<button @click.stop.prevent="fn"></button>
<!-- 点击只会回调一次函数 -->
<button @click.once="fn"></button>
<!-- 阻止默认行为:没有表达式 -->
<form @submit.prevent></form>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
</div>
END
