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;
商品样式进行展示包裹样式
