Vue
## 1.vue的介绍
## 2.使用Vue
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
1.引入Vue
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
2.新建#app
<div id="app">
6.双大括号展示数据
<button @:click="count++">Count is:{{count}}</button>
</div>
<script>
/* Vue={
creatApp:function () {
}
}*/
3.导入createApp
const {createApp} = Vue ES6对象的结构赋值
createApp({
data() { ES6对象的结构赋值（函数）
return {
count: 0 4.创建数据
}
}
}).mount('#app') 5.挂在到#app上
/* Vue.createApp({
data: function () {
return {
count: 0
}
}
}).mount('#app')*/
</script>
</body>
</html>
```
## 2.文本插值
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法，（即双大括号）
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
msg:'Hello,World!'
}
}
}).mount('#app')
</script>
</body>
</html>
```
js中的数据，展示在界面上，相当于原生js中的innerText方法
## 4.原始HTML
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<p>我会{{msg}}了</p>
<p>我会<span v-html="msg"></span>了</p>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
msg:'<strong>Vue</strong>'
}
}
}).mount('#app')
</script>
</body>
</html>
```
本指令
## 5.Attribute的绑定
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<p v-bind:id="idName">我会了</p>
<img v-bind:src="imgUrl" alt="">
<img :src="imgUrl" alt="">
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
idName:'.txt',
imgUrl:'1.pong'
}
}
}).mount('#app')
</script>
</body>
</html>
```
v-bind来修改标签的属性，简写用：即可。
### 5.1布尔型 Attribute
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<audio src="":controls="ctl"></audio>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
ctl:false //true
}
}
}).mount('#app')
</script>
</body>
</html>
```
### 5.2 同时绑定多个Attribute
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<div v-bind="obj">1234</div>
<div :="obj">1234</div> 简写成：也可以
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
obj:{
id:'textId',
className:'textClass', 注意：class名在js中要写成className，在这里用class或className都可以
title:'我是title'
}
}
}
}).mount('#app')
</script>
</body>
</html>
```
### 5.3 使用JavaScript表达式
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>number:{{num+1}}</p>
<p>小明本次考试{{scoreNum<60?"不及格":"及格"}}</p>
<!--这里必须是表达式-->
<p :id="`list-${id}}`">{{message.split('').reverse().join('')}}</p>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
num:0,
scoreNum: 60,
message: 'Hello,world!',
id:1
}
}
}).mount('#app')
</script>
</body>
</html>
```
**注意：每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码（语句不可以）。**
### 5.4 调用函数
可以在绑定的表达式里调用函数，但是非常不建议如此去做，可以使用Math或Date等全局暴露的函数。
```
<p>生成一个随机数{{Math.random()}}</p>
```
## 6.computed计算属性
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{reverseStr}}</p>
<ul>
<li>{{text.splice('').reverse().join('')}}</li>
<li>{{text.splice('').reverse().join('')}}</li>
上面两行，同样的功能要计算两次，消耗性能，并且导致html代码臃肿，下面用计算属性更优
<li>{{reverseStr}}</li>
<li>{{reverseStr}}</li>
</ul>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
text: 'Hello,World!'
}
},
computed: {
reverseStr() { 这里一定要指定this.text,this指的是当前实例，可以理解为data里的数据
return this.text.splice('').reverse().join('')
}
}
}).mount('#app')
</script>
</body>
</html>
```
## 7.事件处理
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<button v-on:click="increment()">+</button>
<button @click="increment()">+</button>
<button v-on:click="decrement()">-</button>
<button @click="decrement()">-</button>
<!--或者用reduce/add-->
<button @click="increment(5)">+5</button>
<button @click="increment(6)">+6</button>
<button @click="decrement(5)">-5</button>
<button @click="decrement(6)">-6</button>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
count:0
}
},
computed: {//计算属性
},
methods:{//方法
increment(a=1){
/*this.count=this.count+a*/
this.count+=a
},
decrement(a=1){
this.count-=a
}
}
}).mount('#app')
</script>
</body>
</html>
```
##### 计算属性vs方法
**注意：计算施行和方法，在结果上确实是相同的，然而不同之处在于计算属性会基于其响应式依赖而被缓存。一个计算属性仅会在响应式依赖更新时才会被重新计算**
## 8.条件渲染
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-if="type==='A'">王</li>
<li v-else-if="type==='B'">文</li>
<li v-else>勇</li>
</ul>
<p v-show="seen">现在你看的到我</p>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
type: 'B',
seen: true
}
}
}).mount('#app')
</script>
</body>
</html>
```
## 9.列表渲染
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--<input type="text" :value="text" @input="ipt($event)">-->
<input type="text" v-model="text">
<p>{{text}}</p>
</div>
<script>
const {createApp} = Vue
const Vm=createApp({
data() {
return {
text: 'Hello,World!'
}
},
/*methods:{
ipt(event){
this.text=event.target.value
}
}*/
}).mount('#app')
</script>
</body>
</html>
```
## 具体例子（购物车）
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<style></style>
<body>
<div id="app">
<div class="container">
<div class="row">
<h1>购书车</h1>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered table-responsive">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) of books" :key="book.id">
<td>{{book.id}}</td>
<td>《{{book.name}}》</td>
<td>￥{{book.price}}</td>
<td>
<button @click="decrement(index)" :disabled="book.count<=1">-</button>
{{book.count}})
<button @click="increment(index)">+</button>
</td>
<td>￥{{book.price*book.count}}</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>总价：{{totalPrice}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
books: [
{id: 0, name: '三体', price: 79, count: 1},
{id: 1, name: '平凡的世界', price: 79, count: 1},
{id: 2, name: '大江东去', price: 79, count: 1},
{id: 3, name: '五大贼王', price: 79, count: 1},
{id: 4, name: '大魔法师', price: 79, count: 1},
{id: 5, name: '哑舍', price: 79, count: 1},
{id: 6, name: '遥远的救世主', price: 79, count: 1},
{id: 7, name: '肖申克的救赎', price: 79, count: 1},
]
}
},
methods: {
increment: function (index) {
this.books[index].count++
},
decrement(index) {
this.books[index].count = this.books[index].count <= 1 ? 1 : this.books[index].count - 1
},
},
computed: {
totalPrice: function () {
/* let totalPrice = 0;
for (book of this.books) {
totalPrice=totalPrice+book.price*book.count
}
return totalPrice;*/
//高阶函数find(),filter()过滤，reduce()
return this.books.reduce((pre, book) => pre + book.price * book.count, 0)
//eg: [1,2,3].reduce((prev,item)=>{return prev+item},0) //6
}
}
}).mount('#app')
</script>
</body>
</html>
```
浙公网安备 33010602011771号