Vue总结

Posted 2020-09-23

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基本雏形:

vue:
html:
<div id="box">
{{msg}}
</div>
js:
var c=new Vue({
el:‘#box‘, //选择器 class tagName
data:{
msg:‘welcome vue‘
}
});
注：this---> 指向new的vue对象

常用指令:

指令: 扩展html标签功能,属性

v-model 一般表单元素(input) 双向数据绑定

事件:
v-on:click="函数"
v-on:click="show()"
注：如果不传参可以把括号省略
简写：@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"
v-show="bShow"
v-show="a>1"
v-show="真/假"

真：true，非空字符串，非0的数字，非空对象
假：false，空串(‘‘,‘ ‘)，0，null，undefined，NaN

 

-----------------------------------------

事件对象:
@click="show($event)"

事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐

默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown 【$event】 ev.keyCode

@keyup="show($event)"

show:function(ev){
ev.keyCode
}

 

常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
-----------------------------------------
属性:
v-bind:src=""
width/height/title....

简写:
:src="" 推荐

<img src="{{url}}" > 效果能出来，但是会报一个404错误
<img :src="url" > 效果可以出来，不会发404请求
-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""

--------------------------
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 参数}}

debounce 配合事件，延迟执行
limitBy 2 0
只写一个参数，截取数组几个
写两个参数，第一个是截取几个，第二位是下标从哪里开始
-----------------------------------------
交互:
$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:
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

https://sug.so.360.cn/suggest?callback=suggest_so&word=a

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show

================================================================

vue制作weibo
交互

vue-> 1.0
vue-resource ajax php
服务器环境(node)

this.$http.get()/post()/jsonp()

this.$http({
url:地址
data:给后台提交数据,
method:‘get‘/post/jsonp
jsonp:‘cb‘ //cbName
emulateJSON ：true //设置文档头(post)
});
----------------------------------
vue事件:
@click=""
数据:

添加一条留言：

获取某一页数据:
getPageData(1);
----------------------------------
vue生命周期————钩子函数:
1.x
初始化实例 init
实例已经创建 created √
编译之前 beforeCompile
编译之后 compiled
数据插入到页面 ready √

销毁之前 beforeDestroy
销毁之后 destroyed

2.x
创建之前 beforeCreate
创建之后 created
编译之前 beforeMount
编译之后 mounted
更新之前 beforeUpdate
更新之后 updated
销毁之前 beforeDestroy
销毁之后 destroyed
----------------------------------

用户会看到花括号标记:

v-cloak 防止闪烁, 比较大段落

----------------------------------

<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html
注：二者都会把标签中原有内容清空

----------------------------------

计算属性的使用:
computed:{
b:function(){ //默认调用get
return 值
}
}
--------------------------
computed:{
b:{
get:
set:
}
}

* computed里面可以放置一些业务逻辑代码，一定记得return
---------------------------------
vue实例简单方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序

vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象

vm.$log(); -> 查看现在数据的状态
vm.$watch(‘要监控的数据‘,function(newVal, oldVal){
变化后干得事情
},{deep:true})
---------------------------------
循环：
v-for="value in data"

会有重复数据？
track-by=‘索引‘ 提高循环性能

track-by=‘$index/uid‘
---------------------------------

自定义过滤器: 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;
}
});

数据 -> 视图
model -> view

view -> model
---------------------------------

自定义指令:

Vue.directive(指令名称,function(参数){
this.el -> 原生DOM元素
});

<div v-red="参数"></div>

指令名称: v-red -> red

* 注意: 必须以 v-开头

------------------------------------------------
v-for:
1.0之前
数组：$index json:$key
(i,v) in arr
(k,v) in json

track-by="$index"

2.0
参数的顺序调换了
去掉了$index
去掉了$key
(v,i) in arr
(v,k) in json
(v,k,index) in json

可以写重复的数据 如果也想改 :key="i"

还可以循环数字
<li v-for="n in 10">{{n}}</li>

------------------------------------------------
监听数据变化:
vm.$el/$mount/$options/....

vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视
------------------------------------------------
vue组件:
组件间各种通信
slot
vue-loader webpack .vue
vue-router

=======================================================

git page：
任何仓库 master分支，都可以发布(git page)

-------------------------------------
引入 vue.js

bower-> （前端）包管理器
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" v-show="bSign" transition="fade"></div>

动画:
.fade-transition{

}
进入：
.fade-enter{
opacity: 0;
}
离开：
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
----------------------------------------
vue组件:

全局组件：
Vue.component(‘ccc‘,{
data(){
return {
msg:‘^_^‘
}
},
template:‘<p>这是第三种组件{{msg}}</p>‘
});

var Home={
template:‘<h2>这是2.0组件的定义新方法</h2>‘
};
--------------------------------------

局部组件：
var vm=new Vue({
el:‘#box‘,
components:{
‘ccc‘:{
template:‘<p>第四种组件</p>‘
}
}
});

--------------------------------------------

动态组件:
<component :is="组件名称"></component>

--------------------------------------------
组件中模板的写法
1. 字符串:
template:‘<p>第四种组件</p>‘

2.script标签:
<script type="x-template" id="ddd">
<div>
<i>这是第二种模板</i>
<span>你好</span>
</div>
</script>

3.html标签:
<template id="eee">
<div>则是第三个模板</div>
</template>

--------------------------------------------

vue默认情况下，子组件也没法访问父组件数据

组件数据传递: √
1. 子组件就想获取父组件data
在父级模板中：
<template id="aaa">
<h1>111</h1>
<bbb :mmm="msg"></bbb> //msg是父级的数据
</template>
在子组件的对象中：
props:[‘mmm‘],
template:‘<p>我是子组件--->{{mmm}}</p>‘

2. 父组件获取子组件的数据
1.子组件把自己的数据，发送到父级

vm.$emit( "child-msg" , this.msg );//msg就是子级的数据

2.父组件去接受数据

在父组件模板中
<span>我是父组件--->{{msg}}</span>
<bbb @child-msg="get"></bbb>
在父级方法中
methods:{
get:function(msg){
//alert(msg)
}
}
--------------------------------------------
vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}

在vue2.0里面已经废除。
--------------------------------------------
slot:
类似ng里面 transclude （指令）

多个占位符
<ul slot="ul-slot">
......
</ul>
<ol slot="ol-slot">
......
</ol>

<slot name="ul-slot"></slot>
<h1>我是h1</h1>
<slot name="ol-slot"></slot>
--------------------------------------------
vue-> SPA应用，单页面应用
vue-resouce 交互
vue-router 路由

2.0版的路由嵌套：

<div id="box">
<div>
<router-link to="/home">首页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>

// 定义组件
var Home={
template:‘<h1>This is Home</h1>‘
};
var User = {
template:`
<div>
<h1>This is User</h1>
<ul>
<li>
<router-link to="/user/username1">show username1</router-link>
</li>
<li>
<router-link to=‘/user/username2‘>show username2</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
};
var Username1={
template:‘<p>I am username1</p>‘
};
var Username2={
template:‘<p>I am username2</p>‘
};

// 配置路由 变量routes是固定的
var routes=[
{path:‘/home‘,component:Home},
{path:‘/user‘,component:User,children:[
{path:‘username1‘,component:Username1},
{path:‘username2‘,component:Username2}
]},
{path:‘*‘,redirect:‘/home‘}
];

// 使用路由实例，变量router是固定的
var router = new VueRouter({
routes
});

// 挂载到Vue
new Vue({
el:"#box",
router
});

 

--------------------------------------

路由嵌套(多层路由):

主页 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

.vue文件:
放置的是vue组件代码

<template>
html
</template>

<style>
css
</style>

<script>
js （平时代码、ES6） babel-loader
</script>
-------------------------------------
简单的目录结构:
|-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 -> 变成正常代码 [email protected]
cnpm install [email protected] --save-dev

vue-html-loader
css-loader
vue-style-loader
[email protected]

babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

// Babel是一个转换编译器，它能将ES6转换成可以在浏览器中运行的代码。

==================================================