文章目录
- [1. 安装 Vue](https://v3.cn.vuejs.org/guide/installation.html#npm)
- 2. 初体验
- 3. 模板语法
- [4. 其他功能](https://v3.cn.vuejs.org/api/special-attributes.html)
- 5. DevTools
- 6. MVVM
- 7. 总结
1. 安装 Vue
<!--方式一:在页面上以 CDN package 的形式导入-->
<script src="https://unpkg.com/vue@next"></script>
<!--方式二:使用npm安装vue-->
<!--1. 初始化项目 两种方式-->
npm init <!--初始化项目-->
npm init -y <!--初始化项目 -y自动回车-->
<!--2. 安装vue的三种方式-->
npm install vue <!--安装vue2.0最新版本-->
npm install vue@3 <!--安装vue3.0最新版本-->
npm i vue@3 <!--简写安装vue3.0最新版本-->
2. 初体验
通过数据绑定的方式,在界面上展示 Hello World
<div id="app">
<!-- 插值表达式 -->
{{ msg }}
</div>
<!-- 引用js -->
<script src="node_modules/vue/dist/vue.global.js"></script>
<script>
// createApp() 是 Vue 中的一个方法,我们先把 Vue 中的 createApp() 方法解构出来:
const {
createApp
} = Vue;
// 每个 Vue 应用都是通过用 createApp() 函数,创建一个新的应用实例开始的,创建出的 app 应用实例是用来在应用中注册“全局”组件的。
const app = createApp({
//数据 方法
data() {
return {
msg: "Hello Wrold~~"
}
}
})
// 传递给 createApp 的选项用于配置根组件。当通过 mount() 方法挂载应用时,该组件被用作渲染的起点。
// 一个应用需要被挂载到一个 DOM 元素中。例如,如果想把一个 Vue 应用挂载到 <div id="app"></div>,应该传递 #app:
const mv = app.mount("#app");
</script>
3. 模板语法
Vue 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应式系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
3.1 插值表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的插值表达式:
<div>Message: {{ msg }}</div>
Mustache 表达式将会被替代为对应组件实例中 msg 属性的值。无论何时,绑定的组件实例上 msg 属性发生了改变,插值处的内容都会更新。
对于所有的数据绑定,Vue 都提供了完全的 JavaScript 表达式支持。
// 直接运算符
{{ number + 1 }}
// 使用三元运算符
{{ age > 18 ? '年满18岁' : '未满18岁' }}
// 使用方法
{{ message.split('').reverse().join('') }}
注意:插值表达式中不能写语句。
<!-- 这是语句,不是表达式:-->
{{ let a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
3.2 常用指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。参考文档
3.2.1 v-html 和 v-text
<div id="app">
<!-- v-html 本质就是dom操作 把msg的值 赋值给div的innerHTML v-html会解析标签-->
<div v-html="msg">123</div>
<!-- v-text 本质就是dom操作 把msg的值 赋值给div的textContent v-text不会解析标签 -->
<div v-text="msg">123</div>
</div>
<script src="../node_modules/vue/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
msg: "<b>hello Vue~~</b>"
}
}
})
const vm = app.mount("#app");
</script>
v-text和v-html区别
- v-text (对应 DOM 中的 textContent/innerText)
v-text 和插值表达式的区别
v-text 标签的指令更新整个标签中的内容
插值表达式,可以更新标签中局部的内容 - v-html (对应 DOM 中的 innerHTML)
可以渲染内容中的 HTML 标签
尽量避免使用,否则会带来危险(XSS攻击)
3.2.2 v-bind
可以绑定标签上的任何属性。
书写的两种方式:
属性前:v-bind
属性前::(冒号,简写)
动态绑定图片的路径
<div id="app">
<img v-bind:src="img" v-bind:alt="alt">
<img :src="img" :alt="alt">
</div>
<script src="../node_modules/vue/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
img: "1.jpg",
alt: "体验~~"
}
}
})
const mv = app.mount("#app")
</script>
绑定a标签上的href
<a v-bind:href="href">百度一下</a>
<a :href="href">百度一下</a>
<!--
return {
href: "http://www.baidu.com",
}
-->
绑定class
对象语法
绑定对象,对象的属性 active,是类样式的名称,绑定的值是数据isActive 。
如果isActive为true,则返回的结果为 <div class=“active”></div>
<!-- {class类名:ture|false} -->
<h1 :class="{actives:isActive}">标题</h1>
<!-- {class类名:ture|false,class类名:true|false} -->
<h1 :class="{actives:isActive,bgColor:isActive}">标题</h1>
数组语法
渲染的结果 <div class=“active text-danger”></div>
<!-- [vue绑定的值,vue绑定的值]-->
<h1 :class="[bgColor,actives]">首页</h1>
return {
isActive: true,
activeClass: 'active',
bgClass: 'bgColor'
}
绑定style
对象语法
渲染的结果 <div style=“color: red; font-size: 18px;”></div>
<!--样式:绑定vue的值,样式:绑定vue的值-->
<div :style="{color:redColor,fontSize:font18+'px'}">{{ alt }}</div>
数组语法
<!--绑定vue的值,绑定vue的值-->
<div :style="[color,fontSize]">{{ alt }}</div>
<!--
return{
alt: "Hello Vue~~",
redColor: "red",
font18: "18",
color: {
color: 'blue'
},
fontSize: {
'font-size': '20px'
}
}
-->
3.2.3 v-model
表单元素的绑定
双向数据绑定
数据可以更新到界面
通过界面可以更改数据
;绑定文本框
当文本框的值发生边框后,div中的内容也会发生变化
<div id="app">
<input type="text" v-model="name">
<div>{{name}}</div>
</div>
<script src="../node_modules/vue/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
name: ""
}
}
})
const vm = app.mount("#app");
</script>
绑定多行文本框
注意:多行文本框中不能使用{{ name }}的方式绑定
<textarea v-model="name"></textarea>
<div>{{name}}</div>
绑定复选框
绑定一个复选框
<input type="checkbox" v-model="checked">
<div>{{checked}}</div>
<!--
checked: true,
-->
绑定多个复选框
此种方式需要input标签提供value属性
<!-- 绑定多个checkbox -->
<!-- 如果checkbox选中会把选中的checkbox的value的值放到 绑定的数组hobby中 -->
<input type="checkbox" value='cf' v-model="hobby">学习<br>
<input type="checkbox" value='sj' v-model="hobby">自律<br>
<input type="checkbox" value='wl' v-model="hobby">玩乐<br>
<div>{{hobby}}</div>
<!--
hobby: []
-->
绑定单选框
<!-- 绑定单选框 -->
<input type="radio" value="男" v-model="sex">男<br>
<input type="radio" value="女" v-model="sex">女<br>
<input type="radio" value="未知" v-model="sex">未知<br>
<div>{{sex}}</div>
<!--
sex: "男"
-->
绑定下拉框
<!--
绑定下拉框的时候,如果没有value属性,默认绑定的是下拉框之间的文本内容
建议下拉框的绑定,都绑定到value属性
-->
<select v-model="selected">
<option value="" disabled>请选择</option>
<option value="小学">小学</option>
<option value="中学">中学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
</select>
<div>{{selected}}</div>
<!--
selected: ""
-->
3.2.4 v-on
我们可以使用v-on指令(通常缩写为@符号)来监听DOM事件,并在触发事件时执行javascript.
用法 v-on:click=“methodName” 或使用快捷方式 @click=“methodName”
给元素注册事件
<!-- v-on:事件名称='事件处理函数' -->
<input type="button" value="按钮" v-on:click="handle">
<!-- 简写形式 @事件名称='事件处理函数' -->
<input type="button" value="按钮" @click="handle">
const { createApp } = Vue;
const app = createApp({
methods: {
handle () {
console.log('别点我');
}
}
});
const vm = app.mount('#app');
事件参数
事件处理函数默认的参数是事件对象
methods: {
handle (e) {
console.log('别点我');
console.log(e.target.tagName)
}
}
内联处理器中的方法
除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法
内联处理器中的方法可以接收参数,还可以使用特殊变量 $event 传递事件对象
<!-- 内联处理器中的方法 -->
<input type="button" value="按钮" @click="handleDel(1, $event)">
methods: {
handleDel(id, e) {
console.log(id)
console.log(e.target)
}
}
3.2.5 v-show 与 v-if
都是控制元素隐藏显示
<div id="app">
<button @click="handler">{{btnText}}</button>
<!--v-show:使用 display 样式属性控制元素显示隐藏,如果频繁切换显示隐藏状态使用 v-show-->
<div v-show="isShow">
Hello world~~
</div>
<!--v-if:隐藏直接删除元素,显示是动态创建元素,如果只显示一次 使用 v-if-->
<div v-if="isShow">
Hello world~~
</div>
</div>
<script src="../node_modules/vue/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
isShow: false,
btnText: "显示"
}
},
methods: {
//事件处理函数
handler() {
this.isShow = !this.isShow;
this.btnText = !this.isShow ? '显示' : '隐藏'
}
}
})
const mv = app.mount("#app");
</script>
3.2.6 v-for
遍历数组
<ul>
<!-- 变量 in 需要循环的数组 -->
<li v-for="todo in todos">{{ todo }}</li>
</ul>
const app = Vue.createApp({
data() {
return {
todos: ['学习', '自律', '幸运']
}
}
})
const mv = app.mount("#app");
遍历对象,只遍历值
<ul>
<li v-for="item in obj">{{item}}</li>
</ul>
obj: {
title: "How to do lists in Vue",
author: "Sun",
date: "2021.7.31"
}
遍历对象,遍历键值和索引
遍历对象时,按 Object.keys() 的结果遍历
<ul>
<!-- (值,键,索引) in 遍历的对象 -->
<li v-for="(value,key,index) in obj">{{key}} {{index}}: {{value}}</li>
</ul>
obj: {
title: "How to do lists in Vue",
author: "Sun",
date: "2021.7.31"
}
3.3 进阶指令
3.3.1 v-cloak 闪烁
解决插值表达式闪烁的问题
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<div v-cloak>
{{msg}}
</div>
</div>
3.3.2 v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<div v-once>{{ msg }}</div>
3.3.3 v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<div v-pre>{{123123}}</div>
3.3.4 修饰符
事件修饰符
prevent
stop
once
按键修饰符
enter
esc
v-model 修饰符
trim 去除绑定数据的前后空格
lazy 默认双向绑定使用的input事件 lazy 改变成change事件
number 尽可能把绑定的数据转换成数字类型
4. 其他功能
4.1 ref
在 Vue 中操作 DOM。
需求:表格案例中让文本框默认获得焦点。
- 给要获取焦点的元素增加 ref 属性
- 在 mounted 中通过 $refs 获取 DOM 元素
<input type="text" ref="input">
// mounted 钩子函数 在vue把页面渲染完毕之后执行
mounted() {
console.log(this.$refs);
//获取页面上文本框的DOM对象
this.$refs.input.focus();
}
4.2 自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。虽然 Vue 中不推荐操作 DOM,但是有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。例如:我们要让品牌管理列表打开的时候,让添加文本框自动获得焦点。
4.2.1 局部自定义指令
只能在当前组件内部只用
<input type="text" v-focus="brandName" v-model="brandName">
// 选项中增加 directives
// 和 data、methods 同级
directives: {
"focus": {
//具有 v-focus 指令的元素,被渲染(挂载)
mounted(el, binding) {
//el 就是具有 v-focus 指令的dom元素
el.focus();
// binding.value ===> data里面的input 的值
// 可以获取指令绑定的表达式的值
console.log(binding);
}
}
}
4.2.2 全局自定义指令
可以在所有组件中使用
<input type="text" v-focus v-model="brandName">
app.directive('focus', {
mounted(el) {
el.focus()
}
})
4.3 计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:把字符串翻转显示在 div 中。
<div>{{ msg.split('').reverse().join('') }}</div>
模板中涉及到逻辑运算,我们应该让模板内的内容尽可能的简单。可以用计算属性重新实现:
<div>{{ reverseMsg }}</div>
// 和 data、methods 同一级别
computed: {
reverseMsg () {
return this.msg.split('').reverse().join('')
}
}
4.4 监听器
监听器当需要在数据变化时执行异步或开销较大的操作时,这个方法时最有用的
<input type="text" placeholder="请输入搜索条件" v-model="searchValue">
data(){
return {
searchValue:""
}
}
watch:{
# 函数名要和监听属性名保持一直
searchValue(newValue,oldValue){
console.log("新值"+newValue);
console.log("旧值"+oldValue);
}
}
5. DevTools
https://github.com/vuejs/vue-devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
6. MVVM
7. 总结
- Vue 最大程度上减少了页面上的 DOM 操作
- 让开发人员更专注于业务操作
- 通过简洁的指令结合页面结构与逻辑数据
- 代码结构更合理
- 维护成本更低
- 数据驱动
- Vue 解放了传统 JavaScript 中频繁的 DOM 操作
# 函数与属性
data(){} 数据
methods:{} 函数
mounted():{} 钩子函数
directives{'':{}} 局部自定义指令
app.directive('',{}) 全局自定义指令
computed:{} 计算属性
watch:{} 监听事件
# 插值表达式
v-html 显示文本(解析标签)
v-text 显示文本(不解析标签)
v-bind : 绑定样式(与$.attr相似)
v-model 双向绑定
v-on @ 绑定事件
v-show 展示
v-if 判断
v-for 循环
v-cloak 解决闪烁问题
v-once 只执行一次
v-pre 自定义标签
# 绑定数据
data() {
# 返回值
return {
counter: 0
}
}
# 事件处理函数
<input type="button" value="按钮" @click="handleDel(1, $event)">
methods: {
# 函数名称
handleDel(id, e) {
console.log(id)
console.log(e.target)
}
}
# mounted 钩子函数 在vue把页面渲染完毕之后执行
<input type="text" ref="input">
mounted(){
# 获取页面上文本框的DOM对象
this.$refs.input.focus();
}
# 局部自定义指令 输入框获取焦点事件可以自定义指令
<input type="text" v-focus v-model="brandName">
directives:{'focus':{
# 具有 v-focus 指令的元素,被渲染(挂载)
mounted(el,binding){
# el 就是具体的v-focus指令的dom元素
el.focus();
# binding.value ===> data里面的input的值
# binding 可以获取指令绑定的表达式的值
binding.value;
}
}}
# 全局自定义指令 输入框获取焦点事件可以自定义指令
<input type="text" v-focus v-model="brandName">
app.directive('focus',{
mounted(el,binding){
el.focus();
binding.value;
}
})
# 计算属性 简化模板中涉及到逻辑运算
<div>{{ msg.split('').reverse().join('') }}</div>
<div>{{ reverseMsg }}</div>
computed:{
reverseMsg(){
return this.msg.split('').reverse().join('');
}
}
# 监听器 当表单发生改变时,触发监听事件
<input type="text" placeholder="请输入搜索条件" v-model="searchValue">
data(){
return {
searchValue:""
}
}
watch:{
# 函数名要和监听属性名保持一直
searchValue(newValue,oldValue){
console.log("新值"+newValue);
console.log("旧值"+oldValue);
}
}