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.注意事项
-
代码中回车或者空格有时会导致报错
-
处理方式:禁止eslint启用严格模式来加载代码
//在项目下新建vue.config.js文件 module.exports = { lintOnSave: false }
-
-
npm run build打包后 生成的引入文件的路径不对 解决方案
-
第一种:手动把路径的斜杠删除
-
第二种:在根目录下新建vue.config.js文件
module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/', */ // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根部, // 例如 https://www.my-app.com/ // 如果你的应用部署在一个子路径下,那么你需要在这里 // 指定子路径。比如将你的应用部署在 // https://www.foobar.com/my-app/ // 那么将这个值改为 '/my-app/' baseUrl: "./", // 构建好的文件输出到哪里 outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时,检查出的错误会触发编译失败 lintOnSave: false, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖 transpileDependencies: [ /* string or regex */ ], // 是否为生产环境构建生成sourceMap? productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // CSS 相关选项 css: { // 将组件内部的css提取到一个单独的css文件(只用在生产环境) // 也可以是传递给 extract-text-webpack-plugin 的选项对象 extract: true, // 允许生成 CSS source maps? sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } } loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files. modules: false }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // configure webpack-dev-server behavior devServer: { open: process.platform === "darwin", disableHostCheck: false, host: "192.168.2.57", port: 9000, https: false, hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy proxy: null // string | Object // before: app => {} }, // 第三方插件配置 pluginOptions: { // ... } };
-
-
npm下载指令 -S -D
-
下载到项目依赖中 项目上线时,这个模块的代码也会在项目中起作用(vue jquery等)
npm i module1 --save
简写为npm i module1 -S
-
下载到环境依赖中,项目上线时,这个模块的代码不会打包到项目中(webpack css-loader等)
npm i module1 --save-dev
简写为npm i module1 -D
-
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>