111
vue:
读音：view
vue到底是什么?
一个mvvm框架(库)、和angular类似
比较容易上手、小巧mvc:
mvp
mvvm
mv*
mvx
vue和angular区别?
-
vue
- 简单、易学（中文）；
- 指令以 v-xxx 开头；
- 一片html代码配合上json，再new出来vue实例；
- 个人维护项目；
- 更适合: 移动端项目,小巧；
- vue的发展势头很猛，github上start数量已经超越angular
-
angular
- 上手难；
- 指令以 ng-xxx；
- 所有属性和方法都挂到$scope身上；
- angular由google维护；
- 更合适: pc端项目
共同点: 不兼容低版本IE
vue基本雏形:
angular展示一条基本数据:
var app=angular.module('app',[]);
app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
})
html:
div ng-controller="xxx"
{{msg}}
vue:
html:
<div id="box">
{{msg}}
</div>
var c=new Vue({
el:'#box', //选择器 class tagName
data:{
msg:'welcome vue'
}
});
常用指令:
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show
$scope.show=function(){}
指令: 扩展html标签功能,属性
v-model
- 一般表单元素(input) 双向数据绑定
<div class="v1">
<input type="text" v-model="msg">
<input type="text" v-model="msg">
{{msg}}
</div>
<script>
var vm = new Vue({
el:".v1",
data:{
msg:"yijiang"
}
})
</script>
- el：用于指定在哪个标签中使用，可以是类名、标签名、ID。
- data：里面可以放数字、字符串、数组、json（其中json打印出来时是Object）。
v-for循环:
v-for="name in arr"
{{name}}
v-for="name in json"
{{name}}
v-for="(k,v) in json"
<div class="for">
<ul>
<li v-for="key in arr">
{{key}}
</li>
<li v-for="(value,key) in json">
{{key}}:{{value}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:".for",
data:{
arr:["apple",'banana',"pear"],
json:{a:"Japple",b:"Jbanana",c:"Jpear"}
}
})
</script>
事件:v-on:
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”
<!--函数-->
<input class="func" type="button" v-on:click="show()" value="显示">
<script>
window.onload = function () {
var vm = new Vue({
el:".func",
methods:{
show:function () {
alert(1111111);
}
}
})
}
</script>
<!--直接绑定-->
<input type="button" value="直接绑定" onclick="alert(1)">
<div class="over">
<input type="button" value="over" v-on:mouseover="over">
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:".over",
data:{
arr:["apple",'banana',"pear"],
},
methods:{
over:function () {
this.arr.push("tomato"); //this代表当前创建的对象vm
}
}
})
</script>
bootstrap+vue简易留言板(todolist):
bootstrap: css框架 跟jqueryMobile一样
只需要给标签 赋予class（角色）
依赖jquery
确认删除？和确认删除全部么?
事件高级
事件:
v-on:click/mouseover......
简写的:
@click="函数" 推荐使用
事件对象:
@click="show($event)"
<body>
<button class="ev" @click="show($event)">按钮</button>
<script>
new Vue({
el:".ev",
methods:{
show:function (a) {
alert(a.clientY)
}
}
})
</script>
</body>
事件冒泡:
阻止冒泡:
a) ev.cancelBubble=true;
b) @click.stop="函数" 推荐使用，只执行本函数，然后停止冒泡
<div class="bubble">
<div class="canBb" @click="show2()">
<button class="ev" @click="show1($event)">按钮</button>
</div>
</div>
<script>
new Vue({
el:".bubble",
methods:{
show1:function (ev) {
alert(111);
ev.cancelBubble = true;
},
show2:function () {
alert(222);
}
}
})
</script>
<div class="bubble">
<div class="canBb" @click="show2()">
<button class="ev" @click.stop="show1()">按钮</button>
</div>
</div>
<script>
new Vue({
el:".bubble",
methods:{
show1:function () {
alert(111);
},
show2:function () {
alert(222);
}
}
})
</script>
阻止默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @xxx.prevent="函数" 推荐
键盘:
@keydown="函数"
如果想要知道按下哪个键，可以通过事件$event获得键码：ev.keyCode
@keyup
常用键:
回车
a）@keyup，回车的键码是13
b）@keyup.enter="函数" 和 @keyup.13="函数"是等价的
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
<div class="keyboard">
<input type="text" @keydown="show($event)">
<input type="text" @keyup.left="showLeft()">
</div>
<script>
new Vue({
el:".keyboard",
methods:{
show:function (ev) {
if (ev.keyCode == 13){
alert("您按回车了")
}
},
showLeft:function () {
alert("我按下了左键")
}
}
})
</script>
属性:v-bind:
v-bind:src=""
width/height/title....
简写:
:src="" 推荐
 会报一个404错误
 效果可以出来
 推荐使用
<div class="propty">
</div>
<script>
new Vue({
el:".propty",
data:{
url:"./aaa.jpg",
tt:"我是一张美图",
w:"100px"
}
})
</script>
class和style:用的不多
:class="" v-bind:class=""
:style="" v-bind:style=""
用法一：数组
:class="[red]" red是数据
:class="[red,b,c,d]"
用法二：json
:class="{red:true, blue:false}"
:class="json"
data:{
json:{red:true, blue:false}
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 复合样式，采用驼峰命名法，如backgroundColor。
:style="json"
模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出
过滤器:-> 过滤模板数据
系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize
currency 钱
{{msg| filterA 参数}}，人民币的钱：{{12|currency "￥"}}
....
<div id="box">
{{'Welcome'|uppercase}}
<br>
{{'wELCOME'|lowercase}}
<br>
{{'WELCOME'|lowercase|capitalize}}
</div>
<script>
new Vue({
el:"#box"
})
</script>
交互:
$http （ajax）
如果vue想做交互，必须要引入: vue-resouce库
get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
<div class="get">
<input type="button" value="获取" @click="getData()">
</div>
<script>
new Vue({
el:".get",
methods:{
getData:function () {
this.$http.get("aaa.php").then(function (res) {
alert(res.data);
},function (res) {
alert(res.status);
});
}
}
})
</script>
给服务发送数据:(使用最多)
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
<div class="send">
<input type="button" value="发送" @click="sendData()">
</div>
<script>
new Vue({
el:".send",
methods:{
sendData:function () {
this.$http.get("a.php",{a:2,b:3},function (res) {
alert(res)
},function (res) {
alert(res.data)
})
}
}
})
</script>
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
<!--post发送数据-->
<div class="pst">
<input type="button" value="pst发送" @click="send()">
</div>
<script>
new Vue({
el:".pst",
methods:{
send:function () {
this.$http.post("aaa.php",{a:10,b:20},{
emulateJSON:true
}).then(function (res) {
alert(res.data);
},function (res) {
alert(res.data)
})
}
}
})
</script>
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);
});
<!--jsonp跨域请求-->
<div class="jsp">
<input type="button" @click="jspGet()" value="jsp获取">
<script>
new Vue({
el:".jsp",
methods:{
jspGet:function () {
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
wd:"a"
},{
jsonp:'cb'
}).then(function (res) {
alert(res.data.s)
},function (res) {
alert(res.status)
})
}
}
})
</script>
</div>
案例：百度下拉列表
https://www.baidu.com/s?wd=ttt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度下拉菜单</title>
<script src="lib/vue.js"></script>
<script src="lib/vue-resource.js"></script>
<style>
.gray{
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="box">
<input type="text" v-model="t1" @keyup="getData($event)" @keydown.up.prevent="goUp()" @keydown.down="goDown()">
<ul >
<li v-for="(index,value) in myData" :class="{gray:index==now}">{{value}}</li>
</ul>
<p v-show="myData.length==0">暂无数据。。。</p>
</div>
<script>
new Vue({
el:".box",
data:{
myData:[],
t1:"",
now:-1
},
methods:{
getData:function (ev) {
//按上下键时不再进行搜索
if (ev.keyCode==38 || ev.keyCode==40)return;
//如果按下回车就进行搜索
if (ev.keyCode==13){
window.open("https://www.baidu.com/s?wd="+this.t1);
}
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{wd:this.t1},{jsonp:"cb"}).then(function (res) {
this.myData = res.data.s;
},function (res) {
alert(res.status)
})
},
goUp:function () {
this.now--;
if (this.now==-2){
this.now = this.myData.length-1;
}
this.t1=this.myData[this.now];
},
goDown:function () {
this.now++;
if (this.now==this.myData.length){
this.now = -1;
}
this.t1=this.myData[this.now];
}
}
})
</script>
</body>
</html>
作业:
1. 简易留言-> 确认删除? 确认删除全部
2. 用vue get 写个例子 weibo
vue制作weibo
交互
vue-> 1.0
vue-resource ajax php
服务器环境(node)
vue-resource有两种用法：
用法一：this.$http.get()/post()/jsonp()
用法二：
this.$http({
url:地址
data:给后台提交数据,
method:'get'/post/jsonp
如果是jsonp一定要加：jsonp:'cb' //cbName
});
----------------------------------
vue事件:
@click=""
数据:
添加一条留言：
获取某一页数据:
getPageData(1);
----------------------------------
vue生命周期:
钩子函数:
created -> 实例已经创建 √
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √（预加载一般放在这里）
beforeDestroy -> 销毁之前
destroyed -> 销毁之后
用户会看到花括号标记:
解决方法一：
添加：v-cloak 防止闪烁, 一般用在比较大的段落
在style便签里面添加: [v-cloak]{display:none;}
解决方法二：
<span>{{msg}}</span> -> 花括号可以用v-text代替，如：<span v-text="msg"></span>
{{{msg}}}，可以解析标签，但是2.0已经被抛弃 -> v-html，这种方式还可以防止闪烁
监听属性值的改变
ng中: $scope.$watch
计算属性的使用:
使用方法一：
computed:{
b:function(){ //b是属性，获取值和data里面数据获取方式一样。默认调用的是get方法
//业务逻辑代码
return 值
}
}
--------------------------
使用方法二：
computed:{
b:{
get:function(){
return 值;
}
set:function(val){ //设置值时候调用
}
}
}
* computed里面可以放置一些业务逻辑代码，一定记得return
<div class="compute">
<span v-text="a"></span>
<br>
<span v-html="b"></span>
<br>
<span>{{com}}</span>
</div>
<script>
var vm = new Vue({
el:".compute",
data:{
a:11111,
b:"<strong>11111</strong>"
},
computed:{
com: {
get: function () {
return this.a + 2;
},
set: function (val) {
this.a = val;
}
}
}
});
document.onclick = function () {
vm.com = 123;
}
</script>
vue实例的一些简单方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序
vm.$options -> 获取自定义属性
vm.$destroy(); -> 销毁对象
vm.$log(); -> 查看现在数据的状态
</script>
<div class="mou">
<span v-text="msg"></span>
</div>
<script>
new Vue({
data:{
msg:"我是mount数据"
}
}).$mount(".mou");
</script>
循环：
v-for="value in data"
会有重复数据？如果无法添加
track-by='索引' 提高循环性能
track-by='$index/uid'
过滤器:
vue提供过滤器:
capitalize uppercase currency....
debounce 配合事件，延迟执行：<input type="text" @keydown="show |debounce 2000">
数组配合使用过滤器:
limitBy 数据；从头开始限制几个
limitBy 数据1 数据2；取几个，从哪开始
filterBy 'o' -> 过滤数据，只留下包含'o'的数据
orderBy 排序
orderBy 谁 1/-1
1 -> 正序
-1 -> 倒序
自定义过滤器: model -> 过滤 ->view
Vue.filter(toDouble,function(input){
return input<10?"0"+input : input;
});
时间转化器:
Vue.filter("date",function(input){
var newDate = new Date(input*1000);
return newDate.getFullYear()+'-'+(newDate.getMonth()+1)+'-'+newDate.getDate()+" "+newDate.getHours()+":"+newDate.getMinutes()+":"+newDate.getSeconds();
}
过滤html标记
双向过滤器:*
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<]+>/g,'');
},
write:function(val){ //view -> model
return val;
}
});
数据 -> 视图
model -> view
view -> model
指令
v-text
v-for
v-html
指令: 扩展html语法
自定义指令:
属性:
Vue.directive(指令名称red,function(参数){
this.el -> 原生DOM元素
});
<div v-red="参数"></div>
指令名称: v-red -> red
* 注意: 必须以 v-开头
拖拽:
-------------------------------
自定义元素指令:（用处不大）
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
@keydown.up
@keydown.enter
@keydown.a/b/c....
自定义键盘信息:
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}); //深度监视
vue组件:(后面讲)
组件间各种通信
slot
vue-loader webpack .vue
vue-router
222
git page：
任何仓库 master分支，都可以发布(git page)
双向过滤器:（使用不多）
Vue.filter(name,{
read:
write:
});
1.0
2.0
使用时，先引入 vue.js
bower-> （前端）包管理器，npm更偏向后台的包管理器
安装：npm install bower -g
验证: bower --version
bower install 包名
bower uninstall 包名
bower info 包名 查看包版本信息
<script src="bower_components/vue/dist/vue.js"></script>
vue-> 过渡(动画)
本质走的css3: transtion ,animation
<div id="div1" transition="fade"></div>
定义动画:
.fade-transition{
transition: 1s all ease;
}
进入：
.fade-enter{
opacity: 0;
}
离开：
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
<head>
<style>
.show{
width: 100px;
height: 100px;
background-color: red;
}
.fade-transition{
transition: 3s all ease;
}
.fade-enter{
opacity: 0;
}
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
</style>
</head>
<body>
<div class="trans">
<input type="button" @click="tog" value="按钮">
<div class="show" v-show="flag" transition="fade"></div>
</div>
<script>
new Vue({
el:".trans",
data:{
flag:true
},
methods:{
tog:function (){
this.flag = !this.flag;
}
}
})
</script>
</body>
</html>
两个opacity都是0
通过animate.css实现更加炫酷的动画：首先要引入animate.css
<div class="animate2">
<input type="button" value="animate" @click="anim">
<div class="animated anim2" transition="tt" v-show="flag"></div>
</div>
<script>
new Vue({
el:".animate2",
data:{
flag:true
},
methods:{
anim:function () {
this.flag = !this.flag;
}
},
transitions:{ //定义所有动画名称
tt:{
enterClass:"slideInLeft",
leaveClass:"bounceOutUp"
}
}
});
</script>
vue组件:
组件: 一个大对象
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);
然后就可以使用：<aaa></aaa>了。
*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
<div class="box">
<aaa></aaa>
</div>
<script>
var AAA = Vue.extend({ //AAA相当于一个类
data: function(){
return {a:"我是其它数据"}
},
methods:{
change:function () {
this.a = "我又回来了"
}
},
template:"<h3 @click='change'>我是标题三,喝喝----{{a}}</h3>"
});
Vue.component('aaa',AAA);
new Vue({
el:".box"
})
</script>
//此后，aaa可以当标签使用了
2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
components:{ //局部组件
aaa:Aaa
}
});
<div class="box2">
<bbb></bbb>
</div>
<script>
var Bbb = Vue.extend({
data(){
return {msg:"bbbbbb"}
},
template:"<h2>我是二标题{{msg}}</h2>"
});
new Vue({
el:".box2",
components:{ //局部组件
bbb:Bbb
}
})
</script>
另一种编写方式:
//全局
Vue.component('my-aaa',{
template:'<strong>好</strong>'
});
//局部
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
template:'<h2>标题2</h2>'
}
}
});
<!--全局缩写形式-->
<div class="box11">
<aaa></aaa>
</div>
<script>
Vue.component('aaa',{
template:"<h2 @click='change'>我是标题222-----{{tt}}</h2>",
data(){
return {tt:"hahaha"}
},
methods:{
change(){
this.tt = "你把我改变了";
}
}
});
new Vue({
el:".box11"
})
</script>
<!--局部缩写-->
<div class="box21">
<bbb></bbb>
</div>
<script>
new Vue({
el:".box21",
components:{
'bbb':{
template:"<h3>哈哈---{{cc}}</h3>",
data(){
return {cc:"是我啦，死鬼"}
}
}
}
})
</script>
配合模板：有多个标签时使用
1. template:'<h2 @click="change">标题2->{{msg}}</h2>'
2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</script>
<div class="box1">
<aaa></aaa>
</div>
<script type="x-template" id="a1">
<h2 @click="change">{{tt}}</h2>
</script>
<script>
new Vue({
el:".box1",
components:{
aaa:{
data(){
return {tt:"shiwo"}
},
methods:{
change(){
this.tt = "welcome"
}
},
template:"#a1"
}
}
});
</script>
- 其中必须指定type为x-template，而且只能用id选择器
b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
<div class="box2">
<bbb></bbb>
</div>
<template id="bb">
<h2>{{tt}}</h2>
</template>
<script>
new Vue({
el:".box2",
components:{
bbb:{
data(){
return {tt:"我又来啦"}
},
template:"#bb"
}
}
})
</script>
动态组件:（感受一下即可）
<component :is="组件名称"></component>
<div id="box1">
<input type="button" value="a1" @click="a='aaa'">
<input type="button" value="b2" @click="a='bbb'">
<component :is="a"></component>
</div>
<script>
new Vue({
el:"#box1",
data:{
a:""
},
components:{
'aaa':{
template:"<h2>我是aaaaaa</h2>"
},
'bbb':{
template:"<h2>我是b啦</h2>"
}
}
})
</script>
vue-devtools -> 调试工具
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
父子组件
vue默认情况下，子组件不能访问父组件数据
<div id="box1">
<aaa></aaa>
</div>
<script>
new Vue({
el:"#box1",
components:{
'aaa':{
template:"<div><h2>我是父组件</h2><bbb></bbb></div>",
components:{
'bbb':{
template:"<h3>我是子组件</h3>"
}
}
}
}
});
</script>
组件数据传递: √
1. 子组件想获取父组件data
在调用子组件时：
<bbb :m="数据"></bbb>
子组件之内:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
<div id="box1">
<aaa></aaa>
</div>
<template id="ttt">
<div>
<h2>{{a}}</h2>
<bbb :mmm="a"></bbb>
</div>
</template>
<script>
new Vue({
el:"#box1",
components:{
'aaa':{
data(){
return {a:"我是父组件里面的数据"}
},
template:"#ttt",
components:{
'bbb':{
props:["mmm"],
template:"<h3>我是子组件--{{mmm}}</h3>"
}
}
}
}
});
</script>
2. 父级获取子级数据
*子组件把自己的数据，发送到父级
vm.$emit(事件名,数据); 子级发送
v-on: @ 父级接收
<div class="box2">
<aaa></aaa>
</div>
<template id="aa2">
<div>
<h2>我是父组件---{{a}}</h2>
<bbb @send-data="getdata"></bbb>
</div>
</template>
<template id="bb2">
<div>
<h3>我是子组件</h3>
<input type="button" value="点我发数据" @click="sss">
</div>
</template>
<script>
new Vue({
el:".box2",
components:{
aaa:{
data(){
return {a:"父级数据"}
},
methods:{
getdata(msg){
this.a = msg
}
},
template:"#aa2",
components:{
bbb:{
data(){
return {b:"子级数据"}
},
template:"#bb2",
methods:{
sss(){
this.$emit("send-data",this.b);
}
}
}
}
}
}
})
</script>
vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经取消，报废了
slot:
位置、槽口；
作用: 占个位置，显示组件里面的内容，如果不使用slot就不能显示；
类似ng里面 transclude （指令）
<div class="box1">
<aaa>
<ul slot="ul-slot">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
<ol slot="olslot">
<li>222222</li>
<li>222222</li>
<li>222222</li>
</ol>
</aaa>
<aaa></aaa>
</div>
<template id="t1">
<div>
<h3>tttttt</h3>
<div>woshinvsheng</div>
<slot name="ul-slot">这是默认情况</slot>
<slot name="olslot">这是默认情况</slot>
</div>
</template>
<script>
new Vue({
el:".box1",
components:{
aaa:{
template:"#t1"
}
}
})
</script>
vue-router
vue -> SPA应用，单页面应用
vue-resouce 交互
vue-router 路由,根据不同url地址，出现不同效果
主页 home
新闻页 news
html:
<a v-link="{path:'/home'}">主页</a> 跳转链接:v-link
展示内容:
<router-view></router-view>
js:
//1. 准备一个根组件，必须要有一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 启动路由
router.start(App,'#box');
//6.跳转:
router.redirect({
‘/’:'/home'
});
路由嵌套(多层路由):
主页 home
登录 home/login
注册 home/reg
新闻页 news
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
路由其他信息:
/detail/:id/age/:age
{{$route.params | json}} -> 当前参数
{{$route.path}} -> 当前路径
{{$route.query | json}} -> 数据
vue-loader:
其他loader -> css-loader、url-loader、html-loader.....
后台: nodeJs -> require exports
broserify 模块加载，只能加载js
webpack 模块加载器， 一切东西都是模块, 最后打包到一块了
require('style.css'); -> css-loader、style-loader
vue-loader基于webpack
.css
.js
.html
.php
.....
a.vue
b.vue .vue文件需要使用vue-loader,vue-loader需要使用webpack编译成浏览器能够懂的代码
.vue文件:
放置的是vue组件代码
<template>
html
</template>
<style>
css
</style>
<script>
js （平时代码、ES6），但是大部分浏览器对ES6还不是很友好，一般通过babel-loader编译成ES5
</script>
搭vue-loader可以使用脚手架vue-cli
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件，第一个字母大写是官方推荐命名法
|-package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件
ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址
webpak准备工作:
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev
App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
一共要安装以下四个：
vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
最最核心：
最最核心：
npm install vue@1.0.28
继续讲手动配置:
webpack+vue-loader
webpack加载模块
如何运行此项目？
1. npm install 或者 cnpm install
2. npm run dev
-> package.json
"scripts":{
"dev":"webpack-dev-server --inline --hot --port 8082"
}
以后下载模块：
npm install <package-name> --save-dev
EADDRINUSE 端口被占用
少了:
webpack-dev-server
webpack
.vue 结尾，之后称呼组件
路由:
vue-router
-> 如何查看版本:
bower info vue-router
路由使用版本: 0.7.13
配合vue-loader使用:
1. 下载vue-router模块
cnpm install vue-router@0.7.13
2. import VueRouter from 'vue-router'
3. Vue.use(VueRouter);
4. 配置路由
var router=new VueRouter();
router.map({
路由规则
})
5. 开启
router.start(App,'#app');
注意:
之前: index.html -> <app></app>
现在: index.html -> <div id="app"></div>
App.vue -> 需要一个 <div id="app"></div> 根元素
home news
路由嵌套:
和之前一模一样
上线:
npm run build
-> webpack -p
脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构
本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范，
单元测试
webpack-simple 个人推荐使用, 没有代码检查 √
browserify -> 自己看
browserify-simple
基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev
