vue2学习
1. 在谷歌浏览器扩展程序安装vue_devtools2.vue介绍:数据驱动视图,双向书绑定。底层原理是mvvm:view、model、viewmodel3.基本使用步骤:
1. 在谷歌浏览器扩展程序安装vue_devtools
2.vue介绍:数据驱动视图,双向书绑定。底层原理是mvvm:view、model、viewmodel
3.基本使用步骤:
4.内容渲染指令:
v-text=:会覆盖元素的内容,eg:<p v-text="gender">性别</p>,传值后性别会被覆盖。
{{}}:插值表达式,不能用在属性节点上,只能放在内容节点。
=v-html:把带标签的内容渲染成html内容。
v-bind::元素属性绑定,可以简写为:。如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如: <div :title="'box' + index">这是一个 div</div>
v-on::事件绑定。可简写为@。要获取事件可使用参数$event。
@keyup:键盘监视器
v-model=:数据双向绑定,适用于input、textarea、select.修饰符包括.number,trim,lazy
v-show:动态为元素添加或移除 `display: none` 样式;v-if:动态创建或移除元素
v-if,v-else-if,v-else:条件渲染
v-for:列表循环渲染
filters:私有的过滤去标志;Vue.filter()公有的过滤器
watch:侦听器。方法格式的需要内容变化才能触发;对象格式的持续侦听。参数有:immediate、deep
//方法1
info:{
handler(newVal,oldVal){
console.log(newVal);
$.get('https://www.escook.cn/api/finduser/'+newVal.name,function(result){
console.log(result);
})
},
//进入页面就触发一次
immediate:true,
//监听对象的元素变化
deep:true
},
//方法2
'info.name'(newVal){
console.log(newVal);
}
5.安装vue-cli
安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli
cnpm install -g webpack
查看是否安装成功
vue -V
6.使用vue-cli
vue create 项目名称:按照步骤操作
选择Manually select features,选择css pre-processors,不选Linter/formatter(容易报错),暂时选择2.x,选择less,选择In dedicated config files,下一步选择Y/N。开始创建工程。
目录结构:
assets 文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源
components 文件夹:程序员封装的、可复用的组件,都要放到 components 目录下
main.js 是项目的入口文件。整个项目的运行,要先执行 main.js
App.vue 是项目的根组件。
main.js的$mount("#app")相当于el:‘#app’
7.使用组件
可选插件:Path Autocomplete
// 导入文件时是否携带文件的拓展名
"path-autocomplete.extensionOnImport": true,
// 配置@的路径提示
"path-autocomplete.pathMappings": {
"@": "${folder}/src"
}
在vue项目的main.js入口文件中,通过Vue.component()方法,可以注册全局组件。
组件属性:props:初始值。 props: ['init'], props:{init:{default:0}}
防止样式冲突,style里面添加scoped
当使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,需要用到 /deep/
组件生命周期:组件创建、组件运行、组件销毁:new vue()-beforeCreat-created-beforeMount-mounted,beforeUpdate-updated,beforeDistroy-distroyed,以上依次执行
数据共享:父组件向子组件共享数据需要使用自定义属性;
子组件向父组件共享数据使用自定义事件。
在vue2.x中,兄弟组件之间数据共享的方案是EventBus
Dom引用:$refs,$nextTick(cb)
数组方法:arr.some((item, index) => { }): 在找到对应的项之后,可以通过 return true 固定的语法,来终止 some 循环;arr.every(item => item.state)循环判断状态;arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值) 累加器
安装axios包:npm i axios -S
动态组件:<component :is="comName"> 外层使用<keep-alive>标签,具备两个生命周期
keep-alive属性include:指定需要缓存的组件;属性exclude 指定哪些组件不需要被缓存。二者不能同时使用。
组件可定义属性:name:'xx'
插槽(slot):<slot name="default"> 如果省略了 slot 的 name 属性,则有一个默认名称叫做 default。v-slot can only be used on components or <template>
在调用插槽时默认情况下,在使用组件的时候,提供的内容都会被填充到名字为 default 的插槽之中,如果要把内容填充到指定名称的插槽中,需要使用 v-slot: 这个指令。 v-slot: 指令的简写形式是#,带名字的插槽叫做具名插槽。在封装组件时,为预留的 <slot> 提供属性对应的值,这种用法,叫做 “作用域插槽”。
子组件
<slot name="default">
<h6>插槽的默认内容(插槽的后备内容)</h6>
</slot>
父组件
<template #default>
<p>插槽内容</p>
</template>
自定义指令:
私有指令:在Vue组件里面,可以使用directives节点,声明私有自定义指令。
directives: {
// color: {
// bind(el, binding, vnode) {
// el.style.color = binding.value;
// },
// update(el, binding, vnode, oldVnode) {
// el.style.color = binding.value;
// }
// }
//如果bind和uodate的逻辑完全相同,可以采用对象格式简化自定义指令。
color(el, binding) {
el.style.color = binding.value;
}
}
全局自定义指令:在main.js里面使用Vue.directive定义。
//全局自定义指令
Vue.directive('color',function(el,binding){
el.style.color=binding.value
})
main.js:Vue.config.productionTip = false 温馨提示,提示生产模式和开发模式。
Eslint:设置,搜索tabsize,都改成2;设置,文本编辑器,搜索format,Editor:format on save勾上;创建工程勾选Linter/Formatter,Eslint+Standard config,Lint on save
.eslintrc.js的rules设置规则。
axios配置:main.js配置,在每个 .vue 组件中要发起请求,直接调用 this.$http.xxx
import axios from 'axios'
// 全局配置 axios 的请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
// 把 axios 挂载到 Vue.prototype 上,供每个 .vue 组件的实例直接使用
Vue.prototype.$http = axios
锚链接:哈希地址。前端路由:Hash地址与组件之间的对应关系
eg:window.onhashchange = ()=>{console.log(location.hash)}
Vue提供了一个官方的解决办法:vue-router
①安装vue-router包:npm i vue-router@3.5.2 -S
②创建路由模块:在src源代码目录下,新建router/index.js路由模块,
//router/index.js
//1. 导入Vue 和 VueRouter包
import Vue from 'vue'
import VueRouter from 'vue-router';
//2. 调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)
//3. 创建路由的实例对象
const router = new VueRouter();
//4. 向外共享路由的实例对象
export default router
③导入并挂载路由模块:
//main.js
//导入路由模块,得到路由的实例对象
//在进行模块化导入的时候,如果给定的是文件夹,则默认导入该文件夹下的index.js
import router from '@/router';
new Vue({
render: h => h(App),
//vue项目,需要把路由实例对象进行挂载
router
}).$mount('#app')
④声明路由链接和占位符
在App页面加入<router-view></router-view>作为占位符;使用<router-link to="/home">首页</router-link>设置链接
在路由模块(router/index.js)修改,导入需要的组件,设置routes。其中routes是一个数组,定义hash地址和组件之间的对应关系。其中redirect是路由重定向
//1. 导入Vue 和 VueRouter包
import Vue from 'vue'
import VueRouter from 'vue-router';
//导入需要的组件
import Home from '@/components/Home';
import About from '@/components/About';
import Movie from '@/components/Movie';
//2. 调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)
//3. 创建路由的实例对象
const router = new VueRouter({
//routes是一个数组,定义hash地址和组件之间的对应关系
routes: [{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/movie',
component: Movie
},
]
});
//4. 向外共享路由的实例对象
export default router
嵌套路由:通过路由实现组件的嵌套展示,叫做嵌套路由
①模板内容中又有子级路由链接、②点击子级路由链接显示子级模板内容
在模板里面添加路由链接和路由占位符;在src/router/index.js路由模块中,导入需要的组件,并使用children属性声明子路由规则。
默认子路由:如果children数组中,某个路由规则的path值为空字符串,则这条路由规则,叫做“默认子路由”。同时将路由链接的tab1删掉。类似于于父路由直接添加redirect
children: [{
path: '',
component: Tab1
},
<router-link to='/about'>tab1</router-link>
动态路由:把Hash地址中可变的部分定义为参数项,从而提高路由规则的复用性。在vue-router中使用英文的冒号(:) 来定义路由的参数项。传到组件的this参数项里面,$route.params.id获取
this.$route:路由的参数对象;this.$router:路由的导航对象
可以为理由规则开启props传参:{path: '/movie/:id',component: Movie,props: true},
在组件的vue里面添加props: ['id']属性
this.$route.fupath:完整路径;path:不包含查询参数;query:查询参数
导航:在浏览器中,点击链接实现导航的方式,叫做声明式导航,例如:普通网页中点击<a>链接、vue项目中点击<router-link>都属于声明式导航;在浏览器中,调用API方法实现导航的方式,叫做编程式导航,例如:普通网页中调用location.href跳转到新页面的方式,属于编程式导航。
编程式导航:常用的API有
①this.$router.push('hash地址):跳转到指定hash地址,并增加一条历史记录②this.$router.replace('hash 地址'):跳转到指定的hash地址,并替换掉当前的历史记录
③this.$router.go(数值 n):调用this. $router.go()方法,可以在浏览历史中前进和后退,比如
this.$router.go(-1);但是如果后退的层数超过上限,则原地不动。➊$router.back()
在历史记录中 后退到.上一一个页面、②$router.forward() 在历史记录中前进到下一个页面。在行内使用编程式导航跳转的时候,this 必须要省略。
导航守卫:导航守卫可以控制路由的访问权限。
全局前置守卫:router.beforeEach(function(to, from, next) {},其中/ to 表示将要访问的路由的信息对象、from 表示将要离开的路由的信息对象、next() 函数表示放行。
主题:修改main.js里面的vant引入方式(css->less)
import Vant from 'vant'
import 'vant/lib/index.less'
修改vue.config.js
const path = require('path')
const coverPath = path.join(__dirname, './src/assets/cover.less')
module.exports = {
publicPath: './',
css: {
loaderOptions: {
less: {
// 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。
modifyVars: {
// 或者可以通过 less 文件覆盖(文件路径为绝对路径)
hack: `true; @import "${coverPath}";`
}
}
}
}
}
新建./src/assets/cover.less文件
@nav-bar-background-color: #007bff;
@nav-bar-title-text-color: white;
@nav-bar-title-font-size: 12px;
---------------------------------------------------------------------------------------------------------------------------------
更新2022年2月17日
切换镜像的工具nrm:
⑴安装:npm install nrm -g ,安装完成重启下电脑
⑵查看仓库nrm ls,带*的就是当前选中的镜像仓库
⑶指定镜像源:nrm use taobao
⑷测速:nrm test npm
命令使用:
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
使用v-text和v-html指令来替代`{{}}`,不会出现插值闪烁,当没有数据时,会显示空白
- v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
- v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
更多推荐
所有评论(0)