1.vue和angular的异同？
vue
- 上手容易
- 指令以 v-xxx
- html+json,然后再new Vue()实例化对象
- 个人维护项目
- 适合移动端
angular
- 上手难
- 指令以 ng-xxx
- 列表内容
- 所有属性和方法都挂载到$scope上
- 由google维护
- 适合web端
2.vue和angular的雏形差异
vue:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue雏形</title>
</head>
<body>
<div id="box">
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
window.onload = function(){
new Vue({
el : "#box",
data : {
msg :"hello girls"
}
});
}
</script>
</body>
</html>
angularJs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angular雏形</title>
</head>
<body>
<!--<div id="box" ng-app="" ng-init="msg='hua'" ng-model="msg">
{{msg}}
</div>-->
<div ng-app="myApp" ng-controller="myCtrl">
{{msg}}
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.msg = "hello girls";
})
</script>
</body>
</html>
vue：直接实例化对象，再将带有数据的对象挂载到相应DOM节点即可。
angular : 中间多了一层controller，所有操作在相应controller的$scope中进行(纯属个人理解)。
2.vue事件
常见事件 v-on:click/mouseover... 简写 @click
事件对象 @click = "show($event)"
事件冒泡 a) ev.cancelBubble = true; b) @click.stop
默认事件 @contextmenu
阻止默认行为 a) ev.preventDefault(); b) @contextmenu.prevent
键盘事件 @keydown @keyup $event ev.keycode 回车(keycode = 13)
3.属性
写法： v-bind:src=""，简写 :src="" 不用这个可能会报一个404错误
class和style
class用法 1. :class="[a,b]" a,b为data中的数据 2. :class="{a:true,b:false}" 3.:class="json" data:{json:{a:true,b:false}}}
style用法 同class
4.模板
{{msg}}实时更新
{{*msg}}数据只绑定一次
{{{msg}}} html转义输出
5.过滤器
内置过滤器 uppercase lowercase capitalize currency(美元)
语法 : {{msg | filterA}} {{'welcome' | filterA | filterB}} 过滤器传参 {{msg | filterA 参数}}
6.交互
引入vue-resource
//get 请求
this.$http.get(url,param).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
//post请求
this.$http.post(url,param,{
emulateJSON:true
},then(function(res){
alert(res.data);
},function(res){
alert(res.status);
})
)
//jsonp
this.$http.jsonp(url,param,{
jsonp : 'cb' //callback函数命名为cb,默认名称为callback
},then(function(res){
{
emulateJSON:true
},then(function(res){
alert(res.data);
},function(res){
alert(res.status);
})
)
//jsonp
this.$http.jsonp(url,param,{
jsonp : 'cb' //callback函数命名为cb,默认名称为callback
},then(function(res){ alert(res.data);
},function(res){
alert(res.status);
})
)
//另外一种写法 $http默认为get
this.$http({
url : '',
data :'',
method : 'get/post/jsonp'
}).then(function(res){
})7.生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box" class="box">
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el : "#box",
data : {
msg : '北冥有鱼，其名为鲲'
},
beforeCreate : function(){
},
created : function(){
alert('实例已经创建'); //√
},
beforeMount : function(){
alert('编译之前');
},
mounted : function(){
alert('插入到文档中了'); //√
},
beforeUpdate : function(){
},
updated : function(){
},
ready : function(){
},
beforeDestroy: function(){
alert('销毁之前');
},
destroyed : function(){
alert('销毁之后');
}
});
</script>
</body>
</html>
8.计算属性的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box" class="box">
{{a}}{{b}}
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el : "#box",
data : {
a : 1,
},
// computed : {
// b : function(){
// //业务逻辑代码 属性b的值完全取决于返回值 这种形式默认调用get()方法
// return this.a+1;
// }
// },
computed : {
b : {
get : function(){
return this.a+1;
},
set : function(val){
this.a = val;
}
}
}
});
document.onclick = function(){
vm.a = 101;
// vm.b = 101;
}
</script>
</body>
</html>
9.实例常用方法
vm.$mount("#box") -- >手动挂载vue
vm.$options.自定义属性 --> 获取自定义属性
vm.$destroy --> 销毁对象
vm.$log() --> 查看现在数据的状态
10.过滤器（略，涉及过滤器已经都有替换写法.）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | filterBy a">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{
}
}).$mount('#box');
</script>
</body>
</html>11.代码复用和抽象-->组件 对普通DOM元素进行底层操作-->自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="js/vue.min.js"></script>
<script>
//普通
// Vue.directive('red',{
// inserted : function(el){
// el.style.background = 'red';
// }
// });
// //拖拽
Vue.directive('drag',{
inserted : function(el){
var _this = el;
el.onmousedown = function(ev){
var disX = ev.clientX - _this.offsetLeft;
var disY = ev.clientY - _this.offsetTop;
document.onmousemove = function(ev){
var l = ev.clientX - disX;
var t = ev.clientY - disY;
_this.style.left = l + 'px';
_this.style.top = t + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
})
window.οnlοad=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
};
</script>
</head>
<body>
<div id="box">
<!--<span v-red>
asdfasd
</span>-->
<div v-drag :style="{width:'100px',height:'100px',background:'blue',position:'absolute',right:0,top:0}"></div>
</div>
</body>
</html>12.前端包管理器bower的使用，vue使用动画(结合animate.css使用，略)
13.vue组件及之间的传值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue全局组件和局部组件</title>
</head>
<body>
<div id="box">
<!--<my-component-name></my-component-name>-->
<!-- 动态组件
<input type="button" @click="a='aaa'" value="aaa组件">
<input type="button" @click="a='bbb'" value="bbb组件">
<component :is="a"></component>-->
<cpt-a></cpt-a>
<!--<blog-post title="我是组件传过来的值"></blog-post>-->
{{postFontSize}}
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
v-on:enlarge="enlarge"
></blog-post>
</div>
<template id="cptname">
<h1></h1>
<cpt-b :mmm="msg"></cpt-b>
</template>
<script src="js/vue.min.js"></script>
<script>
//全局组件 way1 命名最好至少有一个连字符
// Vue.component('my-component-name', {
// //...选项... 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项
// // 一个组件的 data 选项必须是一个函数 因此每个实例可以维护一份被返回对象的独立的拷贝
// data : function () {
// return {
// count : 0
// }
// },
// template : '<button>{{count}}</button>'//该处html过多时考虑另外一种写法
// })
//way2
// var cpt = Vue.extend({
// template : '<button>{{count}}</button>',
// data () {
// return {
// count : 0
// }
// }
//
// })
// Vue.component('my-component-name',cpt);
//
// var vm = new Vue({
// el: "#box"
// })
//局部组件(用的比较多)
// var cpt = {
// template : '<button>{{count}}</button>',
// data () {
// return {
// count : 0
// }
// }
// }
//
// new Vue({
// el : '#box',
// components : {
// 'my-component-name' : cpt
// }
// })
//动态组件
// var vm=new Vue({
// el:'#box',
// data:{
// a:'aaa'
// },
// components:{
// 'aaa':{
// template:'<h2>我是aaa组件</h2>'
// },
// 'bbb':{
// template:'<h2>我是bbb组件</h2>'
// }
// }
// });
//组件的接值(全局)
// Vue.component('blog-post', {
// props : ['title'],
// template : '<h3>{{title}}</h3>'
// })
//组件的接值(局部)
// var vm = new Vue({
// el : '#box',
// components : {
// 'blog-post' : {
// props : ['title'],
// template : '<h3>我是局部组件，所接的值为-{{title}}</h3>'
// }
// }
// })
//组件间的接值(数组) //组件之间的传值
// var vm = new Vue({
// el : '#box',
// data : {
// posts : [
// { id : 1, title : 'title1'},
// { id : 2, title : 'title2'}
// ]
// },
// components : {
// 'blog-post' : {
// props : ['title'],
// template : '<h3>{{title}}<blog-post-l :title=title></blog-post-l></h3>',//模板过于复杂时使用模板字符串
// components : {
// 'blog-post-l' : {
// props : ['title'],
// template : '<h4>子组件传值{{title}}</h4>',
// }
// }
// }
// }
// });
//组件之间的传值 子-->父
var vm = new Vue({
el : '#box',
data : {
posts : [
{ id : 1, title : 'title1', time:'2018-10-15', comments:'3'},
{ id : 2, title : 'title2', time:'2018-10-15', comments:'3'}
],
postFontSize : 1
},
methods : {
enlarge : function(){
alert(1);
this.postFontSize +=0.2;
}
},
components : {
'blog-post' : {
props : ['post','postFontSize'],//模板过于复杂时使用模板字符串
template :`
<div :style="{fontSize: postFontSize + 'em'}"><h3>{{post.title}}</h3>
<buttton v-on:click="$emit('enlarge')">按钮</button>
<div v-html="post.comments"></div>
</div>
`,
}
}
});
//===========================================================
// 好奇猫 : 1.深究一下 组件data格式,每个实例可以维护一份被返回对象的独立的拷贝
var a = {
data : {
count : 0
},
data: function () {
return {
count : 0
}
}
}
console.log(a.data.count); //前者数字，后者undefined 没啥不同 维护工作应该是Vue内部操作
</script>
</body>
</html>
14.插槽(内容分发？略)
15.vue路由的使用(和组件搭配使用,)
16.vue-loader
.vue文件格式(该文件由vue-loader读取)
<template></template>
<style></style>
<script></script>
webpack简单的目录结构
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件（依赖，名称） npm init --yes生成
|-webpack.config.js webpack配置文件
webpack准备工作
cnpm install webpack
cnpm install webpack-dev-server 带服务器
App.vue ->变成正常代码 vue-loader //--save-dev 下载后写入package.json里
cnpm install vue-loader --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader,css-loader,vue-style-loader
vue-hot-reload-api //改完刷新后验证代码
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
核心
vue
页面加载流程
main.js 将组件挂在到body(index.html中)上-->涉及App.vue(涉及各组件用，算是核心文件吧)
//如何运行一个webpack打包的项目
step1.在该项目下运行 npm install or cnpm install
step2.npm run dev
--> package.json
"scripts": {
"dev": "webpack-dev-server --inline --hot --port 8082"
}
EADDRINUS 端口被占用
vue-router配合vue-loader使用
1.下载vue-router npm install vue-router
2.import VueRouter from 'vue-router'
3.Vue.use(VueRouter);
4.var router = new VueRouter();
router.map({路由规则});
5.开启
router.start(App,'#app);
npm run build -->本质 webpack -p
17.vue-cli的使用
含有很多种基本模板
webpack
webpack-simple
browserify
browserify-simple
基本使用流程
1.npm install vue-cli -g 安装vue命令环境
验证是否安装 vue --version
2.生成项目模板
vue init <模板名> 本地文件夹名称
3.进入生成目录里面
npm install
4.npm run dev
报npm版本过低的错误时，删除下载模块重试几次或者用cnpm下载就行.18.vue2.0 transition的使用
