前端学习(三十八）vue（笔记）
Angular+Vue+React
Vue性能最好,Vue最轻
=======================================================
Angular
入门难，学习成本高
Vue
简单
=======================================================
Vue
官网:http://vuejs.org/
中文:http://cn.vuejs.org/
Vue.js的发展
1.x
2.x √
=================================================
Vue如何玩?
new Vue({
el:'元素选择器',
data:{
数据
},
methods:{
方法
方法中：this就是当前new出来的实例
}
});
事件
<button v-on:click="方法()">按钮</button>
<button @click="方法()">按钮</button>
指令:
v-model 指定数据
v-for 循环
v-for="value in arr"
v-for="(value,index) in arr"
v-for="(value,key,index) in json"
v-show 显示
====================================================
简易留言板
计算属性
{{reverseMessage}}
new Vue({
el:'#app',
data:{
message:'hello'
},
computed:{
reverseMessage(){
return this.message.split('').reverse().join('');
}
}
});
======================================================
class操作
:class="{active:true/false}"
style操作
:style="{width:width+'px'}"
图片
:src=""
==================================================
交互
Vue本身不支持交互
可以跟任何交互的库配合
jquery
axios 交互库
不支持jsonp,只支持ajax
=======================================
钩子函数 生命周期
beforeCreate 创建实例之前
created 创建实例完成
beforeMount 挂载之间
mounted 挂载完成
beforeUpdate 更新之前
updated 更新完毕
beforeDestroy 销毁之前
destroyed 销毁完毕
如何销毁:
v.$destroy()
防止闪屏
[v-clock]{
display: none;
}
<div id="div1" v-clock></div>
================================================
事件
事件对象
$event
@click
@contextmenu
@keydown
事件冒泡
ev.cancelBubble = true;
@click.stop = "show()"
默认事件
ev.preventDefualt();
@click.prevent = "show()"
事件冒泡和默认事件同时解决
@click.stop.prevent = "show()"
键盘事件
@keydown.ctrl/enter
自定义按键
Vue.config.keyCodes.a = 65;
@keydown.a = "show()"
=============================================
模板
{{}}
v-text
v-html
-================================================
Vue组件
组件 Component
---------------------------------------------
定义组件
公共的组件
Vue.component('组件的名字',{
template:'模板',
data(){
return {
数据
};
}
});
私有的组件
new Vue({
components:{
'组件的名字':{
template:'模板',
}
}
});
使用组件
<组件的名字></组件的名字>
template一定要有一个根元素
组件写在template中可读性差
<template id=""></template>
<script type="x-template" id=""></script>
==============================================
组件之间数据通信
父级给子级数据
<test :aaa="xxx"></test>
Vue.component('test',{
template:'',
props:['aaa']
或者
props:{
aaa:String
}
});
子级给父级数据
=============================================
Vuex
http://vuex.vuejs.org/
============================================
Vue filter 过滤器
============================================
路由 ***
http://router.vuejs.org/
============================================
vue-cli 脚手架
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
vue init webpack 项目名
vue init webpack-simple 项目名 √
=========================================
引入静态样式资源需要：
style-loader
css-loader
下载:
npm install style-loader css-loader --save-dev
配置:
webpack.config.js
{
test: /\.css$/,
loader: ['style-loader','css-loader']
}
==================================================
axios 2.x推荐
vue-resource 1.x推荐
引入本地图片
require(url);
