vue笔记整理（一）…未完待续
1.vue开发环境搭建
-
cdn方式：直接在页面中引入vue的cdn； <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
-
本地加载vue源代码：在项目中建立vue.js文件，复制vue源代码，导出使用 import Vue from './vue.js'
new Vue({
el: "#app",
data: {
msg: "hello",
age:"18"
}
})
-
手动搭建脚手架 // 自己构建vue的脚手架
//先下载vue模块到node_modules npm i vue
//或者在配置项文件package.json文件中定义好模块后npm i下载
//下载加载器npm install -D vue-loader
(npm install -D vue-loader vue-template-compiler )
//webpack.config.js打包配置文件:
const webpack= require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin') //引入vue加载器
rules: [{test: /\.vue$/,loader: 'vue-loader'}]//loader
plugins:[new VueLoaderPlugin()]//插件
//项目配置文件 pakage.json文件中:
//scripts:{
//"dev":"webpack-dev-server --open --inline --progress --config webpack.config.js"
//}
//在项目中建立.vue文件夹
"<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg:"hello vue"
}
}
}
</script>
<style>
h1{
color: pink;
}
</style>
"
//在index.js入口文件中导入
import Vue from 'vue'
import MyCom from './App.vue'
new Vue({
render(h){return h(MyCom)}
}).$mount('#app')
//启动:npm run dev
-
使用vue官方脚手架搭建项目环境 1. cnpm install @vue/cli -g //下载官方脚手架
2. vue create app1 //项目名称
3. 接下来让你选择一些默认要生成的工具,不管直接回车
4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端
5. 启动:
npm run serve //生成的打包文件在内存中不会写入磁盘用于开发阶段
或者
npm run build //生成的打包文件在dist中 用于项目上线
-
可视化项目管理方式 1. cnpm install @vue/cli -g
2. vue ui
3. 打开的界面 中
4.创建项目==>填写项目名字,选择项目创建的目录 点击创建
5.等待它下载所有配置文件完毕
6.任务中serve启动以后想当与启动了热更新服务器:默认localhost:8080(也可以点启动app直接帮我们打开localhost:8080)
7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为: ./ 然后点保存修改
-
HbuilderX提供创建vue环境的方式 --HbuilderX生成脚手架的方式
HbuilderX 创建项目 选择 vue项目 vue-cli默认模板
然后要:npm i
再:npm run serve
==============
--HbuilderX生成cdn的方式
HbuilderX 创建项目 选择 vue项目普通模式
2.注意事项
3.VM对象和基础指令(面试)
1.vue基础指令
-
插值表达式：在标签中可以使用插值表达式：{{}}，可以在插值表达式中写入JS表达式：变量，函数调用，运算符等。插值表达式中的标识符，代表vue对象中的data的属性名或者methods中的方法名。
插值表达式不能识别标签
<h1>{{msg+"666"}}</h1>
<p>{{fn()}}</p>
<p>{{ count==10?"hellohqyj":"hqyjhello" }}</p>
-
vue基础指令 v-html：底层实现是dom.innerhtml 往标签中添加数据 //能够识别标签
v-text：底层实现是dom.innerText 往标签中添加数据 //不能识别标签
v-cloak：该指令可作为标签的属性，当JS中对应的vue代码加载时，该属性会自动移除 常用于解决vue第一次加载的首屏闪烁问题
v-pre：阻止该标签中的插值表达式被识别 将插值表达式识别为文本
v-bind:属性绑定 v-bind:src="" 语法糖:":src='' "
v-on:事件绑定 v-on:click="fn()" 语法糖："@click=fn()"
示例：
<h1>{{msg+"666"}}</h1>
<p v-cloak>{{fn()}}</p>
<p v-cloak>{{ count==10?"1":"2" }}</p>
<div v-html="p_html"></div>
<div v-text="p_text"></div>
<p v-pre>{{p_pre}}</p>
-
属性绑定 标准写法： v-bind:属性=“属性值” —属性值可以写为vue对象中data的变量 v-bind:src="xxxxxx"
语法糖::src='xxxx' //示例
<a v-bind:href="link">baidu</a>
<a :href="link">baidu</a>
<img v-bind:src="myimg">
<img :src="myimg">
-
事件绑定 标准写法：v-on:事件名=“事件函数”； v-on:click="fn()"
语法糖：@click="fn" //事件函数为vue对象中的methods的方法 括号可以省略。 <button v-on:click="fn1()">点击事件1</button>
<button @click="fn2">点击事件2</button>
<script>
new Vue({
el:"",
data:{},
methods:{
fn1(){
console.log("我是methods里的函数")
}，
fn2(){
console.log("我是methods里的函数")
}
}
})
</script>
//事件绑定中的事件对象
//如果函数未传参，事件对象可以直接打印
<div id="app"><button @click="change1">点我</button></div>
<script>
var vm=new Vue({
el: '#app',
data: {
msg:"hello,vue"
},
methods:{
change1(e){
console.log(e)
}
}
})
</script>
//如果函数需要传参，需要在事件对象前加：$
<div id="app"><button @click="change2(100,$event)">点我</button></div>
<script>
var vm=new Vue({
el: '#app',
data: {
msg:"hello,vue"
},
methods:{
change2(e,arg2){
//e为传入的参数，arg2为事件对象
console.log(e,arg2)
}
}
})
</script>
绑定事件动态更新属性 //vue不建议开发人员直接操作DOM 一切dom操作都交给vue完成
//案例：切换显示图片
<div id="app">
<img :src="imgSrc">
<button @click="change1()">点我</button>
</div>
<script>
new Vue({
el:"#app",
data:{
name:"iphone13", imgSrc:"https://img0.baidu.com/it/u=2451640063,3174757549&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625",
price:"9999",
},
methods:{
change1(){ this.imgSrc="https://img1.baidu.com/it/u=334772281,789513858&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
}
}
})
</script>
2.事件修饰符
-
.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为 -
.prevent 阻止默认事件 -
.capture 添加事件侦听器时让事件在捕获阶段触发 -
.self 只有当元素本身作为事件的目标对象时才会被触发。该事件不会在捕获阶段或者冒泡阶段触发。但是不影响由该元素本身产生的事件链。 -
.once 事件只触发一次,触发完之后,事件就解绑 -
.passive:不拦截默认事件
每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。加上passive就是为了告诉浏览器，不用查询了，没有用preventDefault阻止默认动作。
一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。
-
多修饰符一起使用:连点 --某些修饰符一起使用时会导致冲突。 <div class="box" @click="divBoxHandler">
<input type="button" @click.stop="btnHandler" value="阻止冒泡">
</div>
<a v-on:click.prevent.once="doThat">阻止点击跳转，但是只会阻止第一次</a>
3.事件中的this指向和数据操作
this的指向问题：this找离它嵌套的最近的function或者方法，找到的函数对应的调用者就是this；
1. 方法中的this代表vm对象
a.方法和ES5的函数中的this是vm对象
b.ES6的箭头函数中的this就不是vm==>不推荐使用箭头函数
2. 操作数据: this.xx="新值"
//这里的修改会执行两步操作:
//a.修改内存data容器中的数据
//b.刷新UI==>重新设置innerHTML
//示例 点击按钮更改显示的数据
<div id='app'>
<button @click="clickedme">点我</button>
<p>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el: '#app',
data: {
msg:"hello,vue"
},
methods:{
clickedme(){
console.log(this===vm)
this.msg="6666"
}
}
})
</script>
//点击按钮后，页面显示的内容由hello vue改为6666
---双向数据绑定 ---
4.样式绑定
-
class绑定
-
对象语法：<div v-bind:class="{active:flag,box:true}"></div>----推荐使用
在样式表中定义好对应类名的样式，然后绑定标签的class属性，属性值以对象的方式传入，类名作为对象的属性名，属性值可以以vue对象中的变量表示，当属性值为true时，表示该类名被添加到标签上，则该类名对应的样式被渲染到该节点，为false时，表示该标签无该类名。
-
数组语法：<div v-bind:class="['active','box']"></div> 或者<div v-bind:class="[{active:flag},'box']"></div>
<!--对象语法,v-bind:class 指令也可以与普通的 class 属性共存-->
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<div v-bind:class="classObject"></div>
对应js 中的data:
data: {
isActive: true,
hasError: false,
classObject: {
active: true,
'text-danger': false
}
}
<!--数组语法,这样写将始终添加 errorClass，但是只有在 isActive 是真值时才添加 activeClass-->
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
-
style绑定
-
对象语法：<div :style="{color:'blue',background:bg}">1111</div> -
直接绑定vue对象中的变量：<div :style="box">6666</div>
对应vue对象中data:{box:{color:“red”}}
-
数组语法：<div :style="[box1,box2]">111111</div>
<!--对象语法-->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
对应js 中的data:
data: {
activeColor: 'red',
fontSize: 30,
red1:"red",
styleObject: {
color: 'red',
fontSize: '13px'
}
}
<!--数组语法,可以将多个样式对象应用到同一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles,{color:red1}]"></div>
ed"}}
- 数组语法：
<div :style="[box1,box2]">111111</div>
<!--对象语法-->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
对应js 中的data:
data: {
activeColor: 'red',
fontSize: 30,
red1:"red",
styleObject: {
color: 'red',
fontSize: '13px'
}
}
<!--数组语法,可以将多个样式对象应用到同一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles,{color:red1}]"></div>
|