1. Introduction
1. Concept
Vue is a JS framework for building user interfaces, based on standard HTML, CSS and JavaScript, and provides a set of declarative and componentized programming models to efficiently develop user interfaces. Progressive framework to adapt to different needs for development.
Two core functions:
Declarative rendering: Vue expands a set of template syntax based on standard HTML, which can declaratively describe the relationship between the final output HTML and JS state
Responsiveness: Vue automatically tracks JS state and responsively updates the DOM when it changes
2. The way to create a Vue project
nvm: Node version control tool
(1) Use vite to create
Install and initialize npm init vue@latest
select configuration
Enter the project directory, install the module npm i, start the project npm run dev
(2) Use vue-cli
install npm i -g @vue/cli
Create project vue create project name
Select the relevant configuration item
Start the project npm run serve engineering environment, start slowly
(3) Use a visual interface
vue ui
2. Basic use
1. Template syntax
(1) Text interpolation
The most basic form of data binding is text interpolation, { { }} "Mustache" syntax, interpolation expressions
The interpolation expression Mustache is just a content placeholder and does not cover the content of the reason.
Can only be used in element content nodes, not attribute nodes (v-bind)
Unrecognized tags (v-html)
(2)v-html
{ { }} does not recognize tags, and interprets the data as plain text. To insert HTML, you need to use the v-html command
(3) Attribute binding v-bind:
{ { }}不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令(简写 英文 : )
<div> 最新信息 : {
{ msg }}</div> // msg的值渲染到页面中
<div> 最新信息 : <h1 v-html="msg" ></h1></div> //h1标签内容替换为msg的值, 并以h1格式显示
<div :class="pinkCls"></div> // 属性动态绑定单个值
<div :class="objCls"></div> // 动态绑定多个值 objCls为一个对象, 其中包含多个属性及值2.事件处理
(1)监听事件 v-on:
简写 @: , 使用该指令监听DOM事件, 在事件触发时执行对应的 JS
<!-- 监听事件 -->
<!-- 1. 内联事件处理器：事件被触发时执行的内联 JS 语句 (与 onclick 类似) -->
<!-- 点击按钮实现count++, 并将更新后的值显示在页面上 -->
<button @click="count++">Add 1</button>
<!-- 2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。 -->
<!-- 绑定addNum方法, 方法中对count进行处理, 绑定方法时也可传参-->
<button @click="addNum(5)">+ step </button>
<!-- 3. 在内联处理器中访问事件参数 原生DOM中事件对象 e, 访问时传入 $event, 也可使用内联箭头函数 -->
<button @click="addNum(4,$event)"> + 4</button>
<button @click=" (e) => addNum(3,e)"> + 3</button>
<div>更新count: {
{ count }}</div>(2)事件修饰符
阻止冒泡 .stop
阻止默认行为 .prevent
自身触发 .self
只触发一次 .once
<!-- 事件修饰符 可使用链式书写 e.g: @click.stop.prevent-->
<div class="parent" @click="parentClick">
<!-- 1. 阻止冒泡 .stop 如果没阻止冒泡, 只点击son1, 也会触发parent的点击事件-->
<div class="son1" @click.stop="sonClick" style="background-color: skyblue;">我是son1==> .stop </div>
<!-- 2. 阻止默认行为 .prevent 也可以只有修饰符 e.g: 阻止a链接跳转, 阻止表单提交 -->
<a class="son2" @click.prevent="jump" :href="url" style="background-color: orchid;"> 我是son2==> .prevent </a>
<form @submit.prevent></form>
<!-- 3. 自身触发 点击son3-son不会触发son3的点击事件 -->
<div class="son3" @click.self="sonClick" style="background-color: orange;">
我是son3==> .self
<div @click.self="son_sonClick" style="background-color: blue;">son3-son</div>
</div>
</div>(3)按键修饰符
按键别名: .enter, .tab, .delete (捕获“Delete”和“Backspace”两个按键), .esc, .space,.up,.down, .left, .right
系统按键修饰符: .ctrl, .alt, .shift, .meta
按键修饰符用于可获取焦点的元素中, e.g:input, [div不可(可使用其他方式实现)]
<!-- 按键修饰符 -->
<!-- 当按下回车, 盒子变色 -->
<input @keyup.enter="colChange">
<div :class="colCls">点我,我就变色啦!!!</div>(4).exact修饰符
允许控制触发一个事件所需的确定组合的系统按键修饰符
<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>(5)鼠标按键修饰符
.left, .right, .middle 修饰符将处理程序限定为由特定鼠标按键触发的事件
<template>
<!-- template模板 中写html结构, vue2中模板中只允许包含一个根节点, 在vue3中支持多个根节点, 通常我们还是会使用一个大的盒子包裹起来,在布局和样式中更加方便, 层层递进-->
<div></div>
</template>
<script>
export default {
// 数据
data(){
return{
count: 0,
// 默认类名
colCls: "pinkCls" ,
url:''
}
},
// 处理方法
methods:{
// 颜色改变
colChange(){
this.colCls = "blueCls"
},
// 实现 ++ 也可传参
addNum(step,e){
this.count += step
console.log(e);
},
parentClick(){
alert('parent')
},
sonClick(){
alert('son')
},
son_sonClick(){
alert('son---son')
},
jump(){
this.url = "https://blog.csdn.net/qq_54379580?type=blog"
}
},
}
</script>
<style>
*{
margin: 300px auto;
}
div.pinkCls{
width: 200px;
height: 200px;
background-color: pink ;
}
div.blueCls{
width: 200px;
height: 200px;
background-color: skyblue;
}
div.parent{
width: 500px;
height: 500px;
background-color: pink;
}
</style>参考文档: https://cn.vuejs.org/guide/essentials/event-handling.html