Vue学习整理
Vue学习整理
安装webpack命令环境
cnpm install webpack -g
package.json 工程文件(需要依赖模块、库描述、版本、作者…)
npm init
安装本地webpack
cnpm install webpack –D
webpack 开发环境下编译(打包)
webpack -p 生产环境下编译(压缩)
webpack -w 监听文件改动,自动编译(速度快)
webpack -d 开启(生成)source maps (用来调试)
babel使用:
cnpm install babel-loader babel-core babel-preset-es2015 -D
导出模块:
export default {}
引入模块:
import 名字 from 模块名
配置babel预设:
1). webpack.config.js
babel: {“presets”: [‘es2015’]}
webpack-dev-server
安装命令环境:
cnpm install webpack-dev-server -g
listen EACCES 127.0.0.1:8080 此端口号已经被监听过了(端口号被占用)
参数:
webpack-dev-server –port 8088 端口号
webpack-dev-server –inline 改变完代码以后，自动刷新浏览器
webpack-dev-server –hot 热重载(局部更改)
终端: webpack-dev-server –port 8088 –inline –hot
修改运行端口号：
webpack.config.js配置文件:
devServer: {
port: 8088,
inline: true
}把运行命令放到package.json文件:
"scripts":{
"dev": "webpack-dev-server --inline --hot --port 8088"
}终端: npm run dev
resolve: 配置，省略引入文件名后缀，别名
resolve: {
“extensions”: [”, ‘.js’, ‘.css’, ‘.json’, ‘.jsx’] //可以省略后缀名
}
vue-cli创建vue项目
第一步：全局安装vue-cli
npm install vue-cli -g第二步：初始化一个项目
vue init webpack-simple projectName //webpack-simple 简单的webpack模板
vue init webpack projectName //正式项目推荐使用这种方式第三步：把文件切换到初始化的项目中
cd projectName第四步：安装依赖
npm install第五步：运行
npm run dev第六步：打包
npm run buildvue基本雏形:
<div id="box">
{{msg}}
div>
var c=new Vue({
el:'#box', //选择器 class tagName
data:{
msg:'welcome vue'
}
});常用指令:
v-model 一般表单元素(input) 双向数据绑定
循环:
v-for="name in arr"
{{$index}}
v-for="name in json"
{{$index}} {{$key}}
v-for="(k,v) in json"事件：v-on:click=”函数”
v-on:click/mouseout/mouseover/dblclick/mousedown.....
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){ //方法
alert(1);
}
}
});显示隐藏:
v-show=“true/false”
bootstrap+vue简易留言板(todolist):
bootstrap: css框架 跟jqueryMobile一样
只需要给标签 赋予class，角色
依赖jquery
事件:
v-on:click/mouseover……
简写的:
@click="" 推荐
事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown $event ev.keyCode
@keyup
常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down属性：v-bind:src=”“
简写:
:src="" 推荐
<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是数据
:class="[red,b,c,d]"
:class="{red:a, blue:false}"
:class="json"
data:{
json:{red:a, blue:false}
}
style:
:style="[c]"
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
:style="json"模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出
过滤器: 过滤模板数据
系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize
currency 钱
{{msg| filterA 参数}}
交互:
$http （ajax）
如果vue想做交互
引入: vue-resouce
get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
JSONP
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
https://www.baidu.com/s?wd=s
双向数据绑定
目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view。
<div id="mvvm-app">
<input type="text" v-model="word">
<p>{{word}}p>
<button v-on:click="sayHi">change modelbutton>
div>
<script>
var vm = new MVVM({
el: '#mvvm-app',
data: {
word: 'Hello World!'
},
methods: {
sayHi: function() {
this.word = 'Hi, everybody!';
}
}
});
script>用户会看到花括号标记:
v-cloak 防止闪烁, 比较大段落
{{msg}} -> v-text
{{{msg}}} -> v-html
计算属性的使用:
computed:{
b:function(){ //默认调用get
return 值
}
}
computed:{
b:{
get:
set:
}
}注意：computed里面可以放置一些业务逻辑代码，一定记得return
什么时候使用computed
对于任何复杂逻辑，都应当使用计算属性，例如：
<div id="example">
{{ message.split('').reverse().join('') }}
div>使用计算属性改写：
"example">
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})vue实例简单方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序
vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态循环：
v-for="value in data"
会有重复数据？
track-by='索引' 提高循环性能
track-by='$index/uid'过滤器:
vue提供过滤器:
capitalize uppercase currency….
debounce 配合事件，延迟执行
数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始
filterBy 过滤数据
filterBy ‘谁’
orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序
自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){
});
时间转化器
过滤html标记
双向过滤器:*
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){ //view -> model
return val;
}
});
自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;监听数据变化:
vm.$el/$mount/$options/....
vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视 watch监听数组或者对象
普通watch
data() {
return {
frontPoints: 0
}
},
watch: {
frontPoints(newValue, oldValue) {
console.log(newValue)
}
}watch数组
data() {
return {
winChips: new Array(11).fill(0)
}
},
watch: {
winChips: {
handler(newValue, oldValue) {
for (let i = 0; i < newValue.length; i++) {
if (oldValue[i] != newValue[i]) {
console.log(newValue)
}
}
},
deep: true
}
}watch对象
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
watch: {
bet: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}watch对象具体属性［活用computed］
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
computed: {
pokerHistory() {
return this.bet.pokerHistory
}
},
watch: {
pokerHistory(newValue, oldValue) {
console.log(newValue)
}vue默认情况下，子组件也没法访问父组件数据
组件数据传递: √
1. 子组件想获取父组件data
在调用子组件：
子组件之内:
props:[‘m’,’myMsg’]
props:{
‘m’:String,
‘myMsg’:Number
}
2. 父级获取子级数据
*子组件把自己的数据，发送到父级
vm.$emit(事件名,数据);
v-on:@
vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经，报废了vue2.0:
1. 在每个组件模板，不在支持片段代码
组件中模板:
1.0的写法:
<template>
<h3>我是组件h3><strong>我是加粗标签strong>
template>
2.0的写法:必须有根元素，包裹住所有的代码
<template id="aaa">
<div>
<h3>我是组件h3>
<strong>我是加粗标签strong>
div>
template>关于组件定义
Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃
Vue.component(组件名称,{ 在2.0继续能用
data(){}
methods:{}
template:
});
2.0推出一个组件，简洁定义方式：
var Home={
template:'' -> Vue.extend()
};生命周期
vue1.0版本:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
vue2.0版本:
beforeCreate组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后循环
2.0里面默认就可以添加重复数据
arr.forEach(function(item,index){});
去掉了隐式一些变量
$index $key
之前:
v-for="(index,val) in array"
现在:
v-for="(val,index) in array"track-by="id"
变成
for="(val,index) in list" :key="index"> 自定义键盘指令
之前：Vue.directive('on').keyCodes.f1=17;
现在: Vue.config.keyCodes.ctrl=17过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
limitBy
filterBy
一些简单功能，自己通过js实现
到了2.0， 内置过滤器，全部删除了
自定义过滤器——还有；但是,自定义过滤器传参
之前:{{msg | toDou '12' '5'}}
现在:{{msg | toDou('12','5')}}组件通信:
vm.$emit()
vm.$on();
父组件和子组件:
子组件想要拿到父组件数据:通过 props
之前，子组件可以更改父组件信息，可以是同步 sync
现在，不允许直接给父级的数据，做赋值操作
问题，就想更改：
a). 父组件每次传一个对象给子组件, 对象之间引用 √
b). 只是不报错, mounted中转Vue使用Element-ui搭建项目时候根据官网提示操作完成后还是出现报错情况，在webpack.config.js中加入下列代码：
{
test: /\.css$/,
loader: "style-loader!css-loader"
}, {
test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
loader: "file-loader"
}
配置使用less
安装less依赖，npm install less less-loader –save
修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
如何制作图标字体文件
vue项目中设置路径方式：
vue项目中 build目录下 ——》webpack.base.conf.js设置
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'src': resolve('src'),
'common':resolve('src/common'),
"components":resolve('src/components'),
"api":resolve('src/api'),
"base":resolve('src/base')
}
},Vue中设置后端代理请求
在build目录下——》webpack.dev.conf.js中找到devServer:{…}中进行代理
before(app){
app.get('/api/getDiscList', function (req, res) {
const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
});
},然后在src——》api下进行调用（注意这里的URL调用地址为上面get请求设置的地址）
export function getDiscList(){
const url = '/api/getDiscList'
const data = Object.assign({}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}