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>×</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-devApp.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-devcnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader、 vue-hot-reload-api@1.3.2babel-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.132. 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 --version2. 生成项目模板 vue init <模板名> 本地文件夹名称3. 进入到生成目录里面 cd xxx npm install4. npm run dev