Vue
Vue介绍
vue分别为两个版本，开发版本development和生产版本production
开发版本：vue.js里有主食，有空格有换行等，并且有提示，尤其是错位提示
开发版本：vue.js被压缩成了一行，所以不必要的注释/空格/换行等，都被删除，而且删除了所有的提示，目的是为里减小项目的体积，是打开页面更快，项目上线时用
使用Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
文本插值
<!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>
js中的数据，展示在界面上，相当于原生js中的innnerText方法
原始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>
本指令相当于原始jsHTML
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:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-10-14%2F5f86b08606c7e.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665193913&t=daebad3d83345091b51270fce16522e8'
}
}
}).mount('#app')
</script>
</body>
</html>
v-bind来修改标签的 属性，简写用：即可
布尔型 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
同时绑定多个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">65564</div>
<div :="obj">简写成:也可以</div>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
obj:{
id:'textId',
classNmae:'textClass',
使用 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>
注意：每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码（语句不可以）。
调用函数
可以在绑定的表达式里调用函数，但是非常不建议这么做，可以使用Math或Date等全局暴露的函数
<div>
<p>生成一个随机数{{Math.random()}}</p>
</div>
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.split('').reverse().join()}}</li>
<li>{{text.split('').reverse().join()}}</li>
事件处理
<!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>
<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:{
计算属性VS方法
注意：计算属性和方法，在结果上确实是相同的，然而在不同之处在于计算属性会基于其响应式依赖的被缓存。一个计算属性仅会在其响应式依赖更新时才会被重新计算。
条件渲染
<!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'">AAAA</li>
<li v-else-if="type==='B'">BBBB</li>
<li v-else>CCCC</li>
</ul>
<p v-show="seen">现在你看的到我</p>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
type:'B',
seen:false
}
}
}).mount('#app')
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) of books" :key="index">
表单输入绑定
基本用法1
<!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
createApp({
data() {
return {
text:'Hello World!'
}
}
}).mount('#app')
</script>
</body>
</html>
多行文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/vue/dist/vue.global.js"> </script>
<title></title>
</head>
<body>
<div id="app">
<p style="white-space: pre-line">{{message}}</p>
此css属性可以展示字符串中的换行符，可以被
<textarea v-model="message"></textarea>
多行文本，及换行符，可以被v-model实时修改数据
</div>
<script>
const {createApp}=Vue
createApp({
data() {
return {
message:''
}
}
}).mount('#app')
</script>
</body>
</html>
复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/vue/dist/vue.global.js"> </script>
<title></title>
</head>
<body>
<div id="app">
<label for="ipt"></label>
<input type="checkbox" id="ipt" checked="checked">数据单向绑定，data驱动UI，UI不可以修改data
<p>{{checked}}</p>
</div>
<script>
const {createApp}=Vue
createApp({
data() {
return {
checked:true
}
}
}).mount('#app')
</script>
</body>
</html>
数据的双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/vue/dist/vue.global.js"> </script>
<title></title>
</head>
<body>
<div id="app">
<label for="ipt"></label>
<input type="checkbox" id="ipt" v-model="checked">数据单向绑定，data驱动UI，UI不可以修改data
<p>{{checked}}</p>
</div>
<script>
const {createApp}=Vue
createApp({
data() {
return {
checked:true
}
}
}).mount('#app')
</script>
</body>
</html>
将多个复选框绑定到同一个数组或集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/vue/dist/vue.global.js"> </script>
<title></title>
</head>
<body>
<div id="app">
<h2>选中的人是：{{checkedNames}}</h2>
<input type="checkbox" v-model="checkedNames" value="Jack">Jack
<input type="checkbox" v-model="checkedNames" value="Jom">Jom
<input type="checkbox" v-model="checkedNames" value="Mike">Mike
</div>
<script>
const {createApp}=Vue
createApp({
data() {
return {
checkedNames:[]
}
}
}).mount('#app')
</script>
</body>
</html>
单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/vue/dist/vue.global.js"> </script>
<title></title>
</head>
<body>
<div id="app">
<h2>选中的人是：{{picked}}</h2>
<input type="radio" v-model="picked" value="1">男
<input type="radio" v-model="picked" value="0">女
</div>
<script>
const {createApp}=Vue
createApp({
data() {
return {
picked:1
}
}
}).mount('#app')
</script>
</body>
</html>
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/vue/dist/vue.global.js"> </script>
<title></title>
</head>
<body>
<div id="app">
<div>Selected: {{ selected }}</div>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<script>
const {createApp}=Vue
createApp({
data() {
return {
selected:''
}
}
}).mount('#app')
</script>
</body>
</html>
注意
如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。
多选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/vue/dist/vue.global.js"> </script>
<title></title>
</head>
<body>
<div id="app">
<div>Selected: {{ selected }}</div>
<select v-model="selected" multiple>
这个属性的作用multiple
修饰符
.lazy`
默认情况下，v-model 会在每次 input 事件后更新数据 你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />
.number`
如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：
<input v-model.number="age" />
如果该值无法被 parseFloat() 处理，那么将返回原始值。
number 修饰符会在输入框有 type="number" 时自动启用。
.trim`
如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：
<input v-model.trim="msg" />
类与样式绑定
绑定对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/vue/dist/vue.global.js"> </script>
<style>
@keyframes zhuan {
0%{transform: rotate(0)}
100%{transform: rotate(360deg)}
}
.active{animation: zhuan 10s linear infinite}
</style>
<title></title>
</head>
<body>
<div id="app">
<div :class="{active: isActive}">
mdawmdiw
</div>
</div>
<script>
const {createApp}=Vue
createApp({
data() {
return {
isActive:true
}
}
}).mount('#app')
</script>
</body>
</html>
生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/vue/dist/vue.global.js"> </script>
<style>
@keyframes zhuan {
0%{transform: rotate(0)}
100%{transform: rotate(360deg)}
}
.active{animation: zhuan 10s linear infinite}
</style>
<title></title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
const {createApp}=Vue
createApp({
data() {
return {message:111}
},
setup(){
console.log('setup')
},
beforeCreate() {
console.log('beforeCreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log(beforeMount)
},
}).mount('#app')
</script>
</body>
</html>
侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../..ue-shopping-cartde_modulesue/distue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message"><p>{{name}}</p>
</div>
</body>
<ml>
<script>
const {createApp}=Vue
const vm=createApp({
data(){
return{
message:'1111',
name:'xxxx'
}
},
watch:{
message(){
vue中的Dom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.global.js"> </script>
<style>
#test{
width: 100px;
height: 100px;
background: aquamarine;
}
</style>
</head>
<body>
<div id="app">
<div id="test" ref="test"></div>
<button @click="big">变大div</button>
<input type="text" ref="ipt">
</div>
<script>
const {createApp}=Vue
const vm= createApp({
data() {
return {
}
},
methods:{
big() {
console.log(this.$refs)
this.$refs.test.style.width='200px'
},
setup(){
console.log(this.$refs)},
beforeCreate() {
console.log(this.$refs)
},
created(){
console.log(this.$refs)
},
