VUE.js
vue.js介绍
Vuejs（简称Vue）是一套用于构建用户界面的渐进式前端框架。 Vue.js 核心实现： 响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作。 可组合的视图组件：把视图按照功能切分成若干基本单元，可维护，可重用，可测试等特点。
使用Vue的四种方式：
- 在HTML中以CDN包的形式导入
- 下载S文件保存到本地再导入
- 使用npm安装
- 使用官方VueCli脚手架构建项目（不建议新手直接用）
VUE常用选择
vue.cjs.js 开发版
vue.cjs.prod.js 生产环境版
vue.global.js 未删减版
vue.global.js 生产环境未删减版
Hello World
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p>
{{ message }}
</p>
<p>
{{ hello }}
</p>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!',
hello: 'zhangpeng'
}
}
}).mount('#app')
</script>
模板语法
Vuejs 使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层组件实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。 数据绑定最常见的形式就是使用“双大括号”语法在HTML中插入文本： Message:{{msg]} {{msgl}将被替代对应组件实例中msg属性的值。无论何时，绑定的组件实例上msg属性发生改变，插值处内容都会更新。
指令介绍
指令：带有v-前缀的特殊属性。
指令的作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
v-html
某些情况下，从服务端请求的数据本身就是一个HTML代码，如果用双大括号会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，需要使用v-html和v-text指令：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="hello-vue">
<span v-text="message"> </span>
<p > {{ message }} </p>
<p>
{{ hello }}
</p>
<p>
{{ counter }}
</p>
<span v-html="htmlContext">
</span>
</div>
<script type="text/javascript">
const { createApp } = Vue
createApp({
data(){
return{
message: 'Hello Vue!',
hello: 'zhangpeng',
counter: 0,
htmlContext: "<span style='color: red'>Hello Html!</span>"
}
},
mounted(){
setInterval(()=>{
this.counter++
},1000)
}
}).mount('#hello-vue')
</script>
v-on
在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。 在Vue中如何监听事件呢？使用v-on指令
示例：监听按钮的点击事件
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p>
点击次数: {{ counter }}
</p>
<button type="button" v-on:click="counter++">按钮</button>
</div>
<script>
const { createApp } = Vue
createApp ({
data(){
return{
counter: 0
}
}
}).mount('#app')
</script>
V-on：冒号后面是event参数，例如click、change
监听属性
监听属性（watch）：是一个观察动作，监听data数据变化后触发对应函数，函数有newValue（变化之后结果）和oldValue（变化之前结果）两个参数。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
v-if、v-slse、v-slse-if
判断一个元素是否显示,与seen: true/false有关系
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p v-if="seen">显示测试</p>
</div>
<script>
const { createApp } = Vue
createApp ({
data(){
return{
seen: false
}
}
}).mount('#app')
</script>
添加一个else块,与seen: true/false有关系
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p v-if="seen">显示测试</p>
<p v-else="seen">不显示测试</p>
</div>
<script>
const { createApp } = Vue
createApp ({
data(){
return{
seen: false
}
}
}).mount('#app')
</script>
添加一个template块,与seen: true/false有关系
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p v-if="seen">显示测试</p>
<p v-else="seen">不显示测试</p>
<template v-if="seen">
<h1>标题1</h1>
<p>段落1</p>
</template>
</div>
<script>
const { createApp } = Vue
createApp ({
data(){
return{
seen: true
}
}
}).mount('#app')
</script>
添加一个v-else-if块
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p v-if="seen">显示测试</p>
<p v-else="seen">不显示测试</p>
<template v-if="seen">
<h1>标题1</h1>
<p>段落1</p>
</template>
<div v-if="type == 'A'">
<p>A</p>
</div>
<div v-else-if="type == 'B'">
<p>B</p>
</div>
<div v-else>
<p>其他</p>
</div>
</div>
<script>
const { createApp } = Vue
createApp ({
data(){
return{
seen: true,
type: 'D'
}
}
}).mount('#app')
</script>
这里，v-if指令根据表达式seen的值的真假来插入/移除
元素
v-show
v-show：另一个用于条件性展示元素的指令，与v-if不同的是，v-show的元素始终会被渲染并保留再DOM中，所以v-show只是简单地切换元素的display CSS属性。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<p v-show="seen">显示测试</p>
<p v-else="seen">不显示测试</p>
<template v-if="seen">
<h1>标题1</h1>
<p>段落1</p>
</template>
<div v-if="type == 'A'">
<p>A</p>
</div>
<div v-else-if="type == 'B'">
<p>B</p>
</div>
<div v-else>
<p>其他</p>
</div>
</div>
<script>
const { createApp } = Vue
createApp ({
data(){
return{
seen: false,
type: 'D'
}
}
}).mount('#app')
</script>
v-for
可以用v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<ul>
<li v-for="(c,i) in laptopArray">
{{ i }}{{ c }}
</li>
</ul>
<ul>
<li v-for="(v,k) in myObject">
{{ k }}{{ v }}
</li>
</ul>
</div>
<script type="text/javascript">
const { createApp } = Vue
createApp({
data(){
return{
laptopArray: [
'主机',
'显示器',
'键盘'
],
myObject: {
host: '主机',
displayer: '显示器',
keyboard: '键盘'
}
}
}
}).mount('#app')
</script>
v-for:维护状态
当Vue正在更新使用v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的key 属性：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<ul>
<li v-for="(c,i) in laptopArray" :key="c">
{{ i }}{{ c }}
</li>
</ul>
<ul>
<li v-for="(v,k) in myObject">
{{ k }}{{ v }}
</li>
</ul>
</div>
<script type="text/javascript">
const { createApp } = Vue
createApp({
data(){
return{
laptopArray: [
'主机',
'显示器',
'键盘'
],
myObject: {
host: '主机',
displayer: '显示器',
keyboard: '键盘'
}
}
}
}).mount('#app')
</script>
v-for: 选择列表案例'
获取用户选择并赋值另一个变量再实时展示：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<select name="computer" id="">
<option v-for="row in computer" :value="row.id" :key="row.id">{{row.name}}</option>
</select>
</div>
<div>
<select name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<script>
const { createApp } = Vue
createApp({
data(){
return{
computer: [
{id:1,name: "主机1"},
{id:2,name:"主机2"},
{id:3,name:"主机3"}
]
}
}
}).mount('#app')
</script>
当前选择结果
console.log(event.target.value) //获取事件的值，event是事件对象
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<select name="computer" @change="selectComputer($event)">
<option value="None">未选择</option>
<option v-for="row in computer" :value="row.id" :key="row.id">{{row.name}}</option>
</select>
<p>当前选择结果ID：{{selectComputerID}}</p>
</div>
<div>
<select name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<script>
const { createApp } = Vue
createApp({
data(){
return{
computer: [
{id:1,name: "主机1"},
{id:2,name:"主机2"},
{id:3,name:"主机3"}
],
selectComputerID: ''
}
},
methods:{
selectComputer(event){
console.log(event.target.value)
this.selectComputerID = event.target.value
//this.selectComputerID = event.target.innerHTML
if(this.selectComputerID == "None"){
this.selectComputerID = "未选择"
}
}
}
}).mount('#app')
</script>
Vue常用指令之数据双向绑定
v-model
双向数据绑定：通过前面学习知道Vue是数据驱动的，数据驱动有一个精髓之处是数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
v-model指令提供表单输入绑定，可以在、