v-html? :?
1.v-bind用来绑定数据和属性以及表达式，缩写为'：'
2.v-model
使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用
// 计算属性 因为是内部get方法所以调用时不用加小括号
//
计算属性比方法好 因为不管做多少次 内部只调用一次做缓存
?
@是v-on的缩写?监听dom事件 比如 @input监听输入事件
@click 监听点击事件
?
Webpack配置注意
?
Path 引用node里的包
Path调用resolve函数可以动态获取绝对路径
?
在package.json中的scripts中 引用变量名
然后 用npm run 变量名 去运行?build:”wenpack”
Npm run
bulid 运行时 优先去找本地的
npm init 初始化webpack
?
一般全局webpack在开发中不用
本地webpack根据项目需求的版本去安装对应的版本??
Npm install
webpack@对应版本--save-dev??? 3.6.0
?
DevDependencies开发时依赖
?
?
打包css时?直接在入口require 然后安装对应的依赖在webpack配置
?
对于打包不同的文件 有不同的规则需要
?
打包图片时因为找不到路径 需要在webpack中配置
publicPath:'dist/'
对图片的格式进行hash处理 防止冲突 在图片配置中设置
img/[name].[hash:8].[ext]'
?
?
网页兼容性
Es6转换es5
npm install--save-dev babel-loader@7 babel-core babel-preset-es2015
?
修改presets: ['es2015']
?
?
?
安装vue后要去webpack中配置vue?因为vue默认是用runtime vue.js
要编译 网页显示 需要用esm.js
?
?
开发vue文件?需要install vue-loader vue-template-complier
然后配置webpack? 才可以识别 vue的版本改为13.0.0 合适的版本 看需要
?
在webpack配置文件中的resolve中 配置extendions [‘.js’]?文件可以实现不加后缀名引入
?
?
plugins
：插件?用来扩展webpack的功能
?
?
打包html的plugins
Npm install html-webpack-plugin–save-dev
?
需要在webpack配置文件中引入html-webpack-plugin
然后进行模板配置
?
?
Js压缩所需要的plugin 丑化是要发布的时候才用开发阶段不推荐
Npm install uglifyjs-webpack-plugin@1.1.1–save-dev
?
若安装不了 则npm i -D uglifyjs-webpack-plugin
然后再package.json改版本号为1.1.1 然后npminstall
?
?
Cli2脚手架中使用对应的 webpack版本是3.6.0? dev-sever对应版本是2.9.3
Vue init
webpack 项目名称
?
搭建本地服务器
Npm install webpack-dev-server@2.9.3–save-dev
contentBase 决定为哪个文件夹服务 默认是根文件夹
port 端口号
inline页面实时刷新
historyApiFallback:在Spa页面 依赖html的history模式
?
在webapck配置文件的script配置命令"dev": "webpack-dev-server--open",
--open自动打开
?
?
Webpack配置之配置分离
开发时的依赖dev
生产时依赖prod
公共依赖base
?
npm install
webpack-merge --save-dev 安装工具进行合并依赖
?
在devconfig.js中配置 拉取对应
const WebpackMerge= require('webpack-merge');
const baseConfig = require('./base.config.js')
module.exports = WebpackMerge(baseConfig,{
? devServer:{
??? contentBase:'./dist',
??? inline:true,
? }
})
?
然后再package.json中配置
"dev":"webpack-dev-server --open --config ./build/dev.config.js"
????????????? 打包指定的上一层目录下../?????
path :path.resolve(__dirname,'../dist'),
?
?
vuecli 脚手架安装
npm install-g @vue/cli
?
拉取旧版本
Npm install-g @vue/cli-init
?
初始化
Vue init
webpack 项目名称
?
初始化?ES-lint是只编程规范限制?关掉限制的话 到index.js改为false
?unit单元测试 一般不用
Js以前在浏览器才能跑起来 现在直接用node加js名称 跑
?
Babelrc 是对浏览器兼容的一些配置
?
两种模式
Runtime-coplier之后的开发如果还想用到template 就使用它
Runtime-only：之后的开发使用的是.vue文件开发 就使用它
[if !supportLists]1.?????[endif]性能更高2. 代码量更少
?
?
Vci3的创建?vue? create项目名称????
Vue ui 实现用户界面管理项目
?
若想在js文件实现配置 则需要新建一个vue.config.js? 在里面进行配置 导出modules.export
?
?
?
?
箭头函数中的this是如何查找
向外层作用域中 一层层的查找this? 知道this有定义
?
?
Vuerouter学习
?
首先 必须要安装对应的vuerouter 插件 然后 引入 安装
//配置路由信息
import Vue from 'vue'
import Router from 'vue-router'
// 1.
通过vue.use安装插件 导入vue
Vue.use(Router);
//2.
创建vuerouter对象
const routes = [];
constrouter = new VueRouter({
? routes
})
// 3.
将router对象传入到vue实例中
export default? router
?
最后在main.js中使用配置router? 配置映射关系?一个映射就是一个对象
?
使用vuerouter的步骤是1.创建路由的组件2.配置路由的映射3.使用router-view和router-link
?
Router-link渲染为一个a标签
Tag=button 是渲染成一个按钮 就不是默认渲染成a标签了replace不可返回按钮
active-class="active" 意思是把默认的激活类名改为active或者在配置文件改
?
?>首页
关于
?
Redirect属性:默认跳转的网页
在newrouter里 mode：history 可以去掉网页url上的#
?
Vuerouter在全局加了一个$router属性用来跳转url this.$router.push
?
?
动态路由学习p
path: '/user/:userId',
component: User,
?
User组件中
// route当前哪个活跃
return this.$route.????? .userId;
?
动态绑定
?
懒加载 用的时再加载 加快速度
const Home = () =>? import('../components/Home')
const About = () =>?import('../components/About')
const User = () =>?import('../components/User')
?
?
query查询 ？
<router-link :to="{path:'/profile',query:{name:'linhuan',id:'001'}}">档案</router-link>或者通过button事件
再通过
{{$route.query.id}}
?
?
Router全局守卫
router.beforeEach((to,from,next)=>{
? document.title =to.matched[0].meta.title;
? next(); //next必须有
})
?
meta为每个组件的属性
aftereach 后置钩子
?
?
beforeRouterleave? 记录离开之前 当前组件的状态 下次回来时回到这个时刻
有next一般都要用next? 要在homevue中路径加入activated() {
? console.log('activated');
? this.$router.push(this.path)
},
?
beforeRouteLeave (to, from, next) {
? //导航离开该组件的对应路由时调用
? //
可以访问组件实例`this`
}
actived和disactived 只有在组件保持了keep-alive时才有效 keepalive保持只创建一次
?
keep-alive的两个属性
include 包含的才不会重复渲染?exclude?排除组件
?
tagbar项目
[if !supportLists]1.?????[endif]在style 标签中引入css @import指令
?
Css样式
Flex 水平 分布
vertical-align: middle; //设置图片与文字直接无缝隙
?
components里面放公共的组件
独立的组件放在view里面
?
?
indexOF? 注释：indexOf() 方法对大小写敏感！用来判断path是否为当前活跃route
注释：如果要检索的字符串值没有出现，则该方法返回 -1。
?
v-bind ：?如果过于复杂 可以放在一个methods或者计算属性中
ActiveStyle是一个计算属性 动态绑定 然而v-model是和表单有关的动态绑定
?
?
路径取别名 在webpack公共配置里 respsolve 配置 用的时候加~
?
?
Promise学习
[if !supportLists]1.?????[endif]// promise本身是一个函数 两个参数也是函数?resolve里面参数data 代码放在then里面进行处理?箭头函数只有一个参数时可以省略括号
[if !supportLists]2.?????[endif]Reject处理请求失败?失败后用catch捕获接收
?
All方法传入的是一个数组 []可以放入多个请求 当多个请求都完成时才执行then
?
Vuex
[if !supportLists]1.?????[endif]安装2.使用3.挂载在main.js
?
[if !supportLists]2.?????[endif]直接通过mutation来修改公共属性 详情见代码?两种提交风格
?
State? 公共属性
mutations 一些处理方法
getters 类似于计算属性 处理好的值放在里面 再由$store调用
getters里面的属性要传参数 必须返回一个函数 该函数的参数就是动态填入的值
?????? fifter过滤函数 过滤一些不满足条件的?find找到条件符合的函数
[if !supportLists]3.?????[endif]修改store里的state 都是通过action 添加到state里
Mutation里的函数的第二个参数 是一个值 而getters中的第二个参数是getters本身
incrementCount(state,count){
? state.counter +=count;
}
4.Vuex的响应式系统中??新添加的属性不会响应虽然可以添加到数组中 若想要响应直接用 vue的set方法 删除则用Vue的 delete方法
// 官方推荐写法
this.$store.commit(INCREMENT)?
在另外一个js文件定义好并导出
?
[if !supportLists]4.?????[endif]action 类似于mutation?就是帮mutation 处理异步操作的
看图线上的方法?action通过dispatch
Action里面的参数是$store
?
[if !supportLists]5.?????[endif]modules可以模块化?每个模块对应state mutation acition
module里的东西 自动添加到整个的state
关于 每个module里的getters 第三个参数是根state
fullName3(state,getters,rootState){
? return getters.fullName2 +rootState.counter
}
[if !supportLists]6.?????[endif]对项目结构进行分解
Axios学习 通过npm安装npm install axios –save 运行时用到 所以加save
?
[if !supportLists]1.??????????[endif]Promse方式相关
[if !supportLists]2.??????????[endif]抽取axios相关共同配置?若不想用公共配置 可以用axios的create方法进行配置?具体看文档???
[if !supportLists]3.??????????[endif]当请求方式为post 时?查询对象要放在请求体里
?
购物商城开发
[if !supportLists]1.?????[endif]一般css会有normalize这个css? 在github引入?还有base.css
[if !supportLists]2.?????[endif]取别名 html引用要加~ 创建一个vue.config.js 进行配置??然后从vuecli2中复制editorconfig 统一编程风格
[if !supportLists]3.?????[endif]Home.vue 面向home.js请求开发
[if !supportLists]4.?????[endif]在vue中请求来的数据?保存在当前组件的data中?方便使用 通过浏览器插件vuedevtool进行查看
[if !supportLists]5.?????[endif]Iview ui组件
[if !supportLists]6. [endif].tab-control{
position: sticky;
top: 44px;
}
这个sticky属性
[if !supportLists]7.?????[endif]将一个数组与另外一个数组连接
const nums1=[1,2,3,4]
const nums2 = [5,6,7]
nums2.push(...nums1);
8. display: flex;
/*布局包裹*/
flex-wrap: wrap;
justify-content: space-around; 均等分padding: 2px;
商品样式进行展示包裹样式