『毕业设计』Vue2+Vue3

课程是B站尚硅谷Vue2+Vue3的课程(老师声音真好听(bushi

IMG_4209_20210708-080829_ _2_.JPG

01 Vue核心


1.1 Vue简介

  • 一套用于构建用户界面渐进式JavaScript框架

  • 特点

    1. 采用组件化模块,提高代码复用率、且让代码更好维护
    2. 声明式编码,让编码人员无需直接操作DOM,提高开发效率
    3. 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
  • 前置JavaScript基础:ES6语法规范,ES6模块化,包管理器,原型、原型链,数组常用方法,axios,promise……

懂了,这就先回去补js [唯唯诺诺.jpg]

补了,但没完全补,又回来了,好耶(?

1.2 搭建Vue开发环境

src

1
<script type="text/javascript" src="../js/vue.js"></script>
  • Vue-devtools插件安装

  • 阻止 Vue 在启动时生成生产提示

    1
    Vue.config.productionTip = false

    npm

之后再

后续:自己按网上步骤下完哩,然后学姐帮俺调了一下环境(终于把已有文件打开了QAQ

1.3 Try

1
2
3
4
5
6
7
8
new Vue({
el: "#root", //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
//↑ id-# class-.
data: { //data用于存储数据,数据供el所指定的容器去使用,值暂时对象
name: "Gghost",
age: 21,
}
});
  • Vue实例与容器一一对应
  • ,且可以自动读取到data中的所有属性

1.4 模板语法

1.4.1 插值语法

  • 功能:用于解析标签体内容

  • 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性

1.4.2 指令语法

  • 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件……)
  • 举例:v-bind:href="xxx"或者简写为:href="xxx",xxx写作js表达式,且可以直接读取到data中的所有属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="url">俺的博客</a>
<a :href="url">俺的博客</a>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false

new Vue({
el:'#root',
data:{
name:'jack',
url:'http://www.gjnghost.top'
}
})
</script>

1.4.3 el与data的两种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//el的两种写法
const v=new Vue({
el:'#root',//第一种写法
data:{
name:'eee'
}
})
v.$mount('#root');//第二种写法
/*setTimeout(()=>{
v.$mount('#root');
},1000);*/

//data的两种写法
const v=new Vue({
el:'#root',//第一种写法
//data第一种写法:对象式
data:{
name:'eee'
}
//data第二种写法:函数式
data(){//←全称data:function()
return{
name:'eee'
}
}
})

1.5 MVVM模型

  1. M:模型(Model) :对应 data 中的数据
  2. V:视图(View) :模板
  3. VM:视图模型(ViewModel) : Vue 实例对象

1.6 事件处理

1.6.1 事件的基本使用

  • v-on:xxx@xxx绑定事件,xxx是事件名
  • 事件的回调需要配置在methods对象中,最终在vm上
  • @click='demo'@click=demo($event)效果一致,但后者可以传参

1.6.2 事件修饰符

prevent 阻止默认事件(常用) event.preventDefault() | @xxx.prevent
stop 阻止事件冒泡(常用) event.stopPropagation() | @xxx.stop
once 事件只触发一次(常用) @xxx.once
capture 使用事件的捕获模式 @xxx.capture
self 只有event.target是当前操作的元素时,才触发事件 @xxx.self
passive 事件的默认行为立即执行,无需等待事件回调执行完毕 @xxx.passive
  • 修饰符可以连续写,例@xxx.stop.passive先stop再passive

1.6.3 键盘修饰符

  1. Vue中常用的按键别名:回车—enter,删除—delete,退出—esc,空格—space,换行—tab(配合keydown),上—up,下—down,左—left,右—right

  2. 未提供别名的按键,可以使用按键原始的key值去绑定,但要转化为kebab-case(短横线命名)

    1
    console.log(e.key)//查询key值
  3. 系统修饰键(用法特殊):ctrl、alt、shift、meta

    1. 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件触发
    2. 配合keydown使用:正常触发事件
  4. Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

  • @keyup.ctrl.y,即ctrl+y

1.5 内置指令

v-bind 单向绑定解析表达式
v-model 双向数据绑定

​ v-for : 遍历数组/对象/字符串

​ v-if : 条件渲染(动态控制节点是否存在)

​ v-else : 条件渲染(动态控制节点是否存在)

​ v-show : 条件渲染(动态控制节点是否显示)

​ v-text : 向其所在的节点中渲染文本内容

1.5.1 数据绑定

  • 单向绑定(v-bind):数据只能从data流向页面
  • 双项绑定(v-model):数据可以在data和页面之间流动
    • 双项绑定一般都应用在表单类元素上(如:input、select)
    • 写法:v-model:value ,也可以简写为v-model,因默认收集值为value
  • Copyright: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2021 Gghost
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信