vue1.0学习（持续更新）

Posted 2020-09-27 执候

 

vue

一片html代码配合上json,在new出来vue实例

 

Demo:1

数据双向绑定（v-model="message",{{message}}）

 

<div id="box">
　　<input type=\'text\' v-model="message">
　　<p>{{message}}</p>
</div>

 

var c=new Vue({

 

　　el:\'#box\',    //el为挂载点，可以是class,id,元素

 

　　data:{

 

　　　　message:\'hello world!\'

 

　　}

 

})

Demo:2

v-for

循环数组

<div id="box">

<ul>

<li v-for="arr in arrs">

{{arr}}  {{$index}}

</li>

</ul>

</div>

var c=new Vue({

el:\'#box\',//class,id,元素度可以

data:{

arrs:[\'apple\',\'banana\',\'orange\',\'pear\'],

jsons:{a:\'apple\',b:\'banner\',c:\'car\'}

}

})

循环对象

1：

<div id="box">

<ul>

<li v-for="json in jsons">

{{json}}  {{$index}} {{$key}}

</li>

</ul>

</div>

2：

<div id="box">

<ul>

<li v-for="(k,v) in jsons">

{{k}}  {{v}} {{$index}}

</li>

</ul>

</div>

结果

Demo3：

v-on:(跟事件)click

methods 绑定事件方法

<div id="box">
　　<input type="button" value="按钮" v-on:click="add()">
　　<br/>
　　<ul>
　　　　<li v-for="arr in arrs">
　　　　　　{{arr}} {{$index}}
　　　　</li>
　　　　<li v-for="json in jsons">
　　　　　　{{json}} {{$index}} {{$key}}
　　　　</li>
　　</ul>
</div>

var c=new Vue({
　　el:\'#box\',//class,id,元素度可以
　　data:{
　　　　arrs:[\'apple\',\'banana\',\'orange\',\'pear\'],
　　　　jsons:{a:\'apple\',b:\'banner\',c:\'car\'}
　　},
　　methods:{
　　　　add:function(){
　　　　this.arrs.push(\'tomato\');
　　　　}
　　}
})

 Demo4

v-show  true/false

<div id="box">
　　<input type="button" value="按钮" v-on:click="a=false">
　　<div style="width:100px;height:100px ;background:red" v-show="a">
　　</div>
</div>

var c=new Vue({
　　el:\'#box\',//class,id,元素度可以
　　data:{
　　　　a:true
　　}
})

v-show来控制显示隐藏

Demo5

 简易留言板编写

<div class="container" id="box">
<form role="form">
<div class="form-group">
<label>用户名：</label>
<input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
</div>
<div class="form-group">
<label>年龄：</label>
<input type="text" id="username" class="form-control" placeholder="输入年龄" v-model="age">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
<input type="reset" value="重置" class="btn btn-danger">
</div>
</form>
<hr/>
<table class="table">
<caption class="h2 text-info">用户信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="item in myData">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>
</td>
</tr>

<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">删除全部</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据....</p>
</td>
</tr>
</table>
<!--弹出框-->
<div role="dialog" class="modal" id="layer" data-index="{{nowIndex}}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
<h4 class="modal-title">确认删除么?</h4>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
</div>

vue

var c=new Vue({
el:\'#box\',
data:{
myData:[],
username:\'\',
age:\'\',
nowIndex:-100
},
methods:{
add:function(){
this.myData.push({
name:this.username,
age:this.age
});
this.username=\'\';
this.age=\'\';
},
deleteMsg:function(n){
if(n==-2){
this.myData=[];
}
this.myData.splice(n,1);
}
}
})

、******************************************************************************

列：颜色切换

<style>.red{color:\'red\'}  .blue:{color:\'blue\'}</style>

<strong :class="{red:a,blue:b}"  @click="changeColor"></strong>

new Vue({

　　el:\'#app",

　　data:{

　　　　a:true,

　　　　b:false

　　},

　　methods:{

　　　　changeColor:function(){

　　　　　　this.a=!this.a,

　　　　　　this.b=!this.b

　　　　}

　　}

})

列jsonp传递

<div id="box">
<input type="text" v-model="t1" @keyup="get()">
<ul>
<li v-for="value in myData">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>

new Vue({
　　el:\'body\',
　　data:{
　　　　myData:[],
　　　　t1:\'\'
　　},
　　methods:{
　　　　get:function(){
　　　　　　this.$http.jsonp(\'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su\',

　　　　　　{
　　　　　　　　wd:this.t1
　　　　　　},{
　　　　　　　　jsonp:\'cb\'
　　　　}).then(function(res){
　　　　　　this.myData=res.data.s;
　　　　　},function(){

　　　　});
　　}
　　}
});

、***************************************************************************

 

 

二事件深入

v-on:click   简写 @click

事件对象：

@click="show($event)"

阻止冒泡

ev.cancleBubble=true

@click.stop 

阻止默认事件

.prevent

常用回车键

@keyup.enter
上下左右
@keyup/keydown.left

三属性

v-bind:src=""

v-bind:src 简写:src 

<div id="box">
<img v-bind:src="url" alt="">
</div>

var c=new Vue({
　　el:\'#box\',
　　data:{
　　　　url:\'https://www.baidu.com/img/bd_logo1.png\',

　　}
});

1、:class="[red]"

2、:class="{red:true}"

3、:class="json"  

 data:{

　　json:{red:a,blue:false}

}

style

:style="[c]"

模板

{{msg}} 　　数据更新模板化

{{msg}}  数据更新模板变化

{{*msg}}  数据只绑定一次

{{{msg}}} html任意输出

过滤器

{{msg|filterA}}

{{msg|filterA|filterB}}

uppercase

lowercase

capitalize

{{12 | curreny}} $12

{{12 | curreny \'￥\'}} $12

第二个参数是修改

 

  四交互 v-resource

get

请求文本

new Vue({

　　el:\'#box\',

　　data:{},

　　methods:{

　　　　get:function(){

　　　　　　this.$http.get(\'a.txt\').then(function(res){

　　　　　　　　alert(res.data);

　　　　　　},function(res){

　　　　　　　　alert(res.status);

　　　　　　});

　　　　}

　　}

})

给服务器发送请求

new Vue({

　　el:\'#box\',

　　data:{},

　　methods:{

　　　　get:function(){

　　　　　　this.$http.get(\'get.php\',{

　　　　　　　　a:1,

　　　　　　　　b:20

　　　　　　}).then(function(res){

　　　　　　　　alert(res.data);

　　　　　　},function(res){

　　　　　　　　alert(res.status);

　　　　　　});

　　　　}

　　}

})

post

var c=new Vue({
el:\'#box\',
data:{

},
methods:{
　　get:function(){
　　　　this.$http.post(\'post.php\',{
　　　　a:1,
　　　　b:20
　　},{
　　　　emulateJSON:true //这个相当于post的头文件
　　}).then(function(res){
　　　　alert(res.data);
　　},function(res){
　　　　alert(res.status)
　　});
　　}
}
});

jsonp

先获取接口

https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a

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

var c=new Vue({
el:\'#box\',
data:{

},
methods:{
get:function(){
this.$http.jsonp(\'https://sug.so.360.cn/suggest\',{
wd:\'a\'
},{
jsonp:\'cb\'
//这个相当于post的头文件
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status)
});
}
}
});

 微博搭建

vue生存周期

v-cloak防止闪烁

<style>
[v-cloak]{
　　display:none;
}
</style>

<span>{{msg}}</span>

<span v-text="msg"></span>

<span>{{{}msg}}}</span>

<span v-html="msg"></span>

上面两种结果一样的，就是效果上后面这种自带闪烁

 

　　钩子函数

　　created  -> 实例已经创建

　　beforeCompile ->编译之前

　　compiled ->编译之后

　　ready -> 加载完成 插入到文档中

beforeDestroy ->销毁之前

destroyed ->销毁之后

var vm=new Vue({
　　el:\'#box\',
　　data:{
　　　　a:1
　　},
　　computed:{
　　　　b:{
　　　　　　get:function(){//默认写法
　　　　　　　　return this.a+2;
　　　　　　},
　　　　　　set:function(val){//当赋值是
　　　　　　　　this.a=val;
    　　　　　}
　　　　}
　　}
});

 

vm.$el ->就是元素el

vm.$data ->就是data

vm.$mount(\'#box\') //手动挂载

vm.$options  ->获取自定义属性

vm.$detroy ->销毁对象

遇到循环的数据，你想要展示，最好在html中加入

track-by="$index"

var vm=new Vue({

　　aa:11,  //自定义属性

　　data:{

　　　　a:1

　　}

}).$mount(\'#box\');

vm.$options.aa   //就可以访问了

 

过滤器

| debounce 2000  延迟

数据配合使用过滤器

limitBy 参数（取几个） 从哪开始

filterBy 过滤

orderBy 排序

自定义过滤器

Vue.filter(name,function(){

　　alert();

})

<div id="box">
　　{{a|toDou}}
</div>

Vue.filter(\'toDou\',function(input){
　　return input<10?\'0\'+input:\'\'+input;
})
var vm=new Vue({
　　el:\'#box\',
　　data:{
　　　　a:9
　　}
});

过滤html标记

自定义指令

Vue.directive(指令名称，function(){

　　

})

指令名称 v-red 只能写red

指令必须以v-开头

自定义元素指令

Vue.elementDirective(\'zns-red\',{
　　bind:function(){
　　　　this.el.style.background=\'red\';
　　}
});

<zns-red></zn-sred>

 监听数据变化

vm.$watch()

vm.$watch(\'a\',function(){
　　alert(\'发生变化\');
});

五、bower包管理器

在指定文件打开cmd

npm install bower -g 

bower install vue

他会给你安装最新的，如果不想要可以删除bower uninstall vue

 bower install vue#版本号（1.0.28）

 bower info vue 可以查看版本信息

 vue 过渡（动画）

本质走的css3:transition,animation

<div id="div1" v-show="bSign" transition="fade"></div>

动画:
.fade-transition{

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

列：

<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>

var c=new Vue({
el:\'#box\',
data:{
bSign:true
},
methods:{
toggle:function(){
this.bSign=!this.bSign;
}
},
transitions:{//定义动画
bounce:{
enterClass:\'zoomInLeft\',
leaveClass:\'zoomOutRight\'
}
}
})

 

组件

组件: 一个大对象
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:\'<h3>我是标题3</h3>\'
});

Vue.component(\'aaa\',Aaa);

*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)

2,局部组件

 

2. 局部组件
放到某个组件内部

var Aaa=Vue.extend({
　　template:\'<h3>{{msg}}</h3>\'
　　data:function(){
　　　　return {
　　　　　　msg:\'我是标题\'
　　　　}
　　},
});

var vm=new Vue({
　　el:\'#box\',
　　data:{
　　　　bSign:true
　　},
　　components:{ //局部组件
　　　　aaa:Aaa
　　}
});

另一种编写方式:
Vue.component(\'my-aaa\',{
template:\'<strong>好</strong>\'
});

var vm=new Vue({
　　el:\'#box\',
　　components:{
　　　　\'my-aaa\':{

　　　　　　data:function(){

　　　　　　　　return{

　　　　　　　　　　msg:\'2222\'

　　　　　　　　}

　　　　　　},

　　　　　　methods:{

　　　　　　},
　　　　　　template:\'<h2>{{msg}}</h2>\'
　　　　}
　　}
});

配合模板:
1. template:\'<h2 @click="change">标题2->{{msg}}</h2>\'

2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>

多个组件切换 动态组件

<div id="box">
<input type="button" @click="a=\'aaa\'" value="aaa组件">
<input type="button" @click="a=\'bbb\'" value="bbb组件">
<component :is="a"></component>
</div>

var vm=new Vue({
el:\'#box\',
data:{
a:\'aaa\'
},
components:{
\'aaa\':{
template:\'<h2>我是aaa组件</h2>\'
},
\'bbb\':{
template:\'<h2>我是bbb组件</h2>\'
}
}
});

vue-devtools   ->调试工具

 

组件数据传递: √
1. 子组件就想获取父组件data
在调用子组件：
<bbb :m="数据"></bbb>

子组件之内:
props:[\'m\',\'myMsg\']

props:{
\'m\':String,
\'myMsg\':Number
}

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

vm.$emit(事件名,数据);

v-on: @

 slot位置、槽口

 重点

vue->SPA应用，单页面应用

v-resource  交互

v-router     路由  0.7.13

主页 home

新闻页 news

html:
<a v-link="{path:\'/home\'}">主页</a> 跳转链接

展示内容:
<router-view></router-view>

 

<div id="box">
<ul>
<li>
<a v-link="{path:\'/home\'}">主页</a>
</li>
<li>
<a v-link="{path:\'/news\'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>

<script>
//1,准备根组件
var App=Vue.extend();

//2准备Home和Neews组件
var Home=Vue.extend({
template:\'<h3>我是Home</h3>\'
})

var News=Vue.extend({
template:\'<h3>我是News</h3>\'
})

//3.准备路由
var router=new VueRouter();

//4.关联
router.map({
\'home\':{
component:Home
},
\'news\':{
component:News
}
})
//5启动路由
router.start(App,\'#box\');
//6跳转
router.redirect({
\'/\':\'/home\'
})
</script>

路由嵌套

<template id="home">
<h3>我是主页</h3>
<div>
<a v-link="{path:\'/home/login\'}">登录</a>
<a v-link="{path:\'/home/reg\'}">注册</a>
</div>
<div>
<router-view></router-view>
</div>
</template>

 

router.map({
\'home\':{
　　component:Home,
　　subRoutes:{
　　　　\'login\':{
　　　　　　component:{
　　　　　　　　template:\'<strong>我是登录</strong>\'
　　　　　　}
　　　　},
　　　　\'reg\':{
　　　　　　component:{
　　　　　　　　template:\'<strong>我是注册</strong>\'
　　　　　　}
　　　　}
　　}
},
\'news\':{
　　component:News
}
})

路由的其他信息

/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>

</style>

<script>

js

</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 -> 变成正常代码 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

 

路由:
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