Vue
Vue中所有的配置文件修改以后，需要重新启动项目
#项目初始化
vue init webpack name()
1.安装vue-cil
npm install -a vue cli
2.初始化项目
vue init webpack my-project
3.进入项目
cd my-project
4.安装依赖
npm install
5.启动项目
npm run dev
#项目目录结构
index.html 项目根视图
.postcssrc.js postcss配置文件
static 静态文件目录
#模板语法
Vue组件
包含三个部分
template:视图
script:逻辑部分
style:样式部分
Mustache:模板
表现形式：{{语法}}
Vue基本指令：
v-html: 渲染文本
v-text: 渲染文本
v-bind: 绑定数据 可简写（:）
列表渲染：
v-for 列表循环的时候一定要key 不然会警告
事件监听:
v-on
@keyup.enter 监听指定按键 回车
对象都放在methods里面
methods:{}
事件参数
修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 事件只生效一次
数组更新检测：
变异方法：引起视图更新
替换数组：不会引起视图更新
计算属性
计算属性和methods区别
计算属性取缓存
methods 每次都重新调用
表单输入绑定
v-model 双向数据绑定
表单修饰符
v-model.lazy 失去焦点才触发
v-model.number 用户输入内容转化数字类型
v-model.trim 自动过滤用户输入的首位空格
methods:{}
computed:{} 计算属性，计算属性是基于依赖进行缓存的，而methods每次都重新执行
watch:{} 实时监听一个函数
页面主要布局组件
一、三个部分组成
1、template
2、script
3、style
scoped
二、子父级组件
子父级组件交互（通信）
父->子 子页面用props接收
子->emit Event
数据传递类型限制（验证）
数据类型验证
多数据类型验证
必选项
默认值
obj、arr数据类型的默认值
1.单文件组件
三个部分组成
1、template
只能存在一个根元素
2、script
3、style
scoped:样式只在当前组件内生效
子父级组件：
交互（通信）
父=》子
数据类型传递类型限制
数据类型验证（type）
必选项（required）
默认值
obj/arr数据类型默认值需要function return 默认值
子=》父
$emit
3.插槽
单个插槽。
具名插槽
4.作用域插槽
数据是子传父的
5.动态组件
keep-alive
什么情况下使用缓存：
css过渡与动画
1.class的操作
2.animate第三方库的引用
过渡类名：
v-enter:进入开始
v-enter-active:执行过程中
v-enter-to：结束动画
v-leave:离开
v-leave:-active:离开过程
v-leave-to:离开结束
css 动画
可以使用第三方css动画库，如Animate.css
自定义指令 v-name (标签里定义)
全局指令：
Vue.directives("name",{
inserted:function(value){
return if(value == 1){
value == 0
}
return value
}
})
局部指令：directinve:{
fouce:{
inserted:function(value){
return if(value == 1){
value == 0
}
return value
}
}
}
过滤器 直接在花括号里面引用过滤器名称即可
filters
axios:
1.安装 npm install axios
2.引入加载
import axios from ''
挂载原型上
Vue.prototype.$axios = axios
3.请求（GET）
this.$axios("http://www.wwtliu.com/sxtstu/news/juhenews.php",{
params:{
type:"junshi",
count:30
}
})
.then(res=>{
console.log(res.data.result.data)
this.newData = res.data.result.data
})
.catch(error=>{
console.log(error)
})
请求（POST）
注意：axios接收的post请求参数的格式是form-data格式
数据格式转化
import qs from "qs"
qs.stringify{
}
Axios 全局的默认值
Axios.defaults.baseURL = '请求的域名';//其他地方请求地址可以省略域名
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//第三方认证涉及到token 如果没有可以干掉
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 全局设置post请求的数据编码格式
拦截器：
在请求或相应then 或者catch处理前拦截它们
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
跨域处理：
注意：定义的默认的全局域名必须注释
修改config中的index.js文件
// 第一步替换他的地址
proxyTable:{
"/api":{
target:"http://localhost:8080",
changeOrgin:true,
pathRewrite:{
'^/api':''
}
}
}
//第二步
修改main.js声明;添加HOST代理（读取HOST相当于读取config里面index.js中的proxyTable 中target的地址）
Vue.prototype.HOST = ‘/api’
Mock:数据模拟
1.自己创建JSON文件。使用get请求形式访问数据
方便、快捷
2、项目中集成服务器，模拟各种接口
优点：模拟真实线上环境
缺点：增加开发成本
3.直接使用线上数据
优点：真实
缺点：不一定每个项目都存在
路由基本加载 （vue-router）
如果一个模块化工程中使用它，必须要通过Vue.use明确的安装路由功能
1、npm install --save vue-router (路由安装)
2、引用（main.js）
import router from "vue-router" 引入
Vue.use("router") 挂载
var router = new Vuerouter({
routes:[
{
path:"/",
component:HelloWorld
}
]
})
new Vue({
el: '#app',
components: { App },
router,
template: '<App/>'
})
视图加载的位置
<router-view></router-view>
跳转（导航）
<router-link to="/Ninserted">helloword</router-link>
路由嵌套：只需要在路由设置文件里面给他添加children数组
children:不用加斜杠只需要写组件名称即可
添加子路由地址注意：必须写 全部路径
<router-link to="/index/java">helloword</router-link>
自动识别组件里的router-view 标签
路由传递参数：
1.需要在路由设置的path后面写入传递参数的名称。示例：path:"index/:count/:type"
2.需要在页面的route-link to="{name:'跳转页路由的名称'，params:{count:10,type:obj}}" 可以传递对象。
3.需要跳转后的页面接收 {{$route.params.count}} ||{{$route.params.type.name}}
linkActiveClass：定义高亮样式名称。（全局）
理由高亮：mode:history(浏览器所有历史记录)
hash:url hash 值作为路由，支持所有浏览器，包括不支持html5 的history
history:history.back()(浏览器只返回上一级)
Element-ui（安装组件）
1.npm i element-ui -s
2.安装按需加载的依赖
npm install babel-plugin-component -D
3.修改.babelrc文件
{
“presets”: [
[“env”, {
“modules”: false,
“targets”: {
“browsers”: ["> 1%", “last 2 versions”, “not ie <= 8”]
}
}],
“stage-2”
],
“plugins”: [“transform-vue-jsx”, “transform-runtime”,[“component”, [
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-chalk”
}
]]]
}
4.进入组件
按需引入
import { Button, Select } from ‘element-ui’
Vue.use(Button)
Vue.use(Select)
Swiper组件安装
https://www.swiper.com.cn/
懒加载插件安装
地址：https://github.com/hilongjw/vue-lazyload
import VueLazyload from ‘vue-lazyload’
Vue.use(VueLazyload)
imgObj: {
src: ‘http://xx.com/logo.png’,
error: ‘http://xx.com/error.png’,
loading: ‘http://xx.com/loading-spin.svg’
},
安装less
1、在文件webpack.base.conf.js里面rules添加
{
test: /.scss$/,
loaders: [“style”, “css”, “sass”,“style-loader!css-loader!less-loader”]
}
- 装style-loader
命令：npm install --save-dev style-loader css-loader
package-lock.json 可以查看是否安装成功
注意style里面必须 type=“text/less” 在style标签如此引入
手机端注意先引入以下代码：(手机端直接用框架)
判断是PC端还是移动端：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
VueX
如果不构建大型项目不建议使用VueX
view ->(dispatch) Action ->(Commit) Mutations ->(Mutate) State -> View
注意：Action 不是必需品，如果有异步操作才可能用到Action,否则可以不适用
安装VueX
命令:npm install vuex --save
import Vuex from 'vuex'
Vue.use(Vuex)
在main.js里面创建一个store仓库
const store = new Vuex.Store({
state:{
count:150,
},
})
任何其他组件页面接收：]
view层：{{getCount}}
computed:{
getCount(){
this.$store.state.count
}
}
mutations 绝对不可以异步方法，必须是同步
3.Actions （网络请求需要用actions）
使用形式通过
this.$store.dispatch("Actions") 调用mutations里面的方法进行触发
actions 提交的是mutation,而不是直接变更状态
actions 可以包含任何异步操作。
扫一扫
2173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
