实例介绍
【实例简介】
vue:
读音: v-u-eview
vue到底是什么?
一个mvvm框架(库)、和angular类似
比较容易上手、小巧
mvc:
mvp
mvvm
mv*
mvx
官网:http://cn.vuejs.org/
手册： http://cn.vuejs.org/api/
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) 双向数据绑定
循环:
v-for="name in arr"
{{$index}}
v-for="name in json"
{{$index}} {{$key}}
v-for="(k,v) in json"
事件:
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”
bootstrap vue简易留言板(todolist):
bootstrap: css框架 跟jqueryMobile一样
只需要给标签 赋予class，角色
依赖jquery
确认删除？和确认删除全部么?
-----------------------------------------
事件:
v-on:click/mouseover......
简写的:
@click="" 推荐
事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown $event ev.keyCode
@keyup
常用键:
回车
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}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求
-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是数据
:class="[red,b,c,d]"
:class="{red:a, blue:false}"
:class="json"
data:{
json:{red:a, blue:false}
}
--------------------------
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 参数}}
....
-----------------------------------------
交互:
$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:
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);
});
https://www.baidu.com/s?wd=s
作业:
1. 简易留言-> 确认删除? 确认删除全部
2. 用vue get 写个例子 weibo
【实例截图】
【核心代码】
资料
├── 01. Vue.JS 第一课
│ └── 2016-9-13
│ ├── a.txt
│ ├── data里面存储数据.html
│ ├── get.php
│ ├── lib
│ │ ├── bootstrap.js
│ │ ├── bootstrap.min.css
│ │ └── jquery-1.7.2.js
│ ├── post.php
│ ├── vue-class.html
│ ├── vue-class2.html
│ ├── vue-class3.html
│ ├── vue-class4.html
│ ├── vue-class5.html
│ ├── vue-resource.js
│ ├── vue-style.html
│ ├── vue-style2.html
│ ├── vue-style3.html
│ ├── vue-style4.html
│ ├── vue-交互.html
│ ├── vue-属性.html
│ ├── vue-循环.html
│ ├── vue-模板.html
│ ├── vue-交互2.html
│ ├── vue-属性2.html
│ ├── vue-循环2.html
│ ├── vue-模板2.html
│ ├── vue-交互3.html
│ ├── vue-属性3.html
│ ├── vue-循环3.html
│ ├── vue-交互4.html
│ ├── vue-交互5.html
│ ├── vue-交互6.html
│ ├── vue-过滤器.html
│ ├── vue-过滤器2.html
│ ├── vue-过滤器3.html
│ ├── vue-过滤器4.html
│ ├── vue-过滤器5.html
│ ├── vue-基础事件.html
│ ├── vue-基础事件2.html
│ ├── vue-基础事件3.html
│ ├── vue-点击按钮div消失.html
│ ├── vue-点击按钮div消失2.html
│ ├── vue-百度下拉列表.html
│ ├── vue-百度下拉列表2.html
│ ├── vue-百度下拉列表3.html
│ ├── vue-百度下拉列表4.html
│ ├── vue-百度下拉列表5.html
│ ├── vue-百度下拉列表6.html
│ ├── vue.js
│ ├── vue雏形.html
│ ├── vue雏形2.html
│ ├── vue简易留言板.html
│ ├── vue简易留言板2.html
│ ├── vue简易留言板3.html
│ ├── vue简易留言板4.html
│ ├── 笔记.txt
│ ├── 事件深入-事件冒泡.html
│ ├── 事件深入-事件对象.html
│ ├── 事件深入-键盘事件.html
│ ├── 事件深入-默认行为.html
│ ├── 事件深入-事件冒泡2.html
│ ├── 事件深入-事件对象2.html
│ ├── 事件深入-键盘事件2.html
│ ├── 事件深入-默认行为2.html
│ ├── 事件深入-键盘事件3.html
│ ├── 事件深入-键盘事件4.html
│ ├── 事件深入-键盘事件5.html
│ ├── 事件深入-键盘事件6.html
│ ├── 事件深入-键盘事件7.html
│ ├── 事件深入.html
│ ├── 事件深入2.html
│ ├── 常用指令v-model.html
│ ├── 常用指令v-model2.html
│ ├── 常用指令v-model3.html
│ └── 常用指令v-model4.html
├── 02. Vue.JS 第二课
│ └── 课件
│ ├── lifecycle.png
│ ├── v-html.html
│ ├── v-html2.html
│ ├── v-text.html
│ ├── v-text2.html
│ ├── vue-resource.js
│ ├── vue.js
│ ├── vue生存周期.html
│ ├── vue生存周期2.html
│ ├── vue实例简单方法.html
│ ├── vue实例简单方法2.html
│ ├── vue实例简单方法3.html
│ ├── vue实例简单方法4.html
│ ├── vue实例简单方法6.html
│ ├── weibo
│ │ ├── img
│ │ │ ├── ad.png
│ │ │ ├── bg.jpg
│ │ │ ├── bodyBg.jpg
│ │ │ ├── btns.png
│ │ │ ├── icons.png
│ │ │ ├── inputBg.png
│ │ │ ├── jj.png
│ │ │ ├── takeSbmComment.png
│ │ │ └── userBj.png
│ │ ├── style
│ │ │ ├── common.css
│ │ │ ├── weibo.css
│ │ │ └── weibo_bak.css
│ │ ├── weibo.php
│ │ ├── weibo_test.html
│ │ ├── weibo_test2.html
│ │ ├── weibo_test3.html
│ │ ├── weibo_test4.html
│ │ ├── weibo_test5.html
│ │ └── weibo_test6.html
│ ├── 循环-重复数据.html
│ ├── 循环-重复数据2.html
│ ├── 笔记.txt
│ ├── 过滤器-debounce.html
│ ├── 过滤器-filterBy.html
│ ├── 过滤器-limitBy.html
│ ├── 过滤器-limitBy2.html
│ ├── 过滤器-limitBy3.html
│ ├── 过滤器-orderBy.html
│ ├── 过滤器-orderBy2.html
│ ├── 过滤器-orderBy3.html
│ ├── 自定义指令-拖拽.html
│ ├── 自定义指令-元素指令.html
│ ├── 自定义指令.html
│ ├── 自定义指令2.html
│ ├── 自定义指令3.html
│ ├── 自定义指令4.html
│ ├── 自定义指令5.html
│ ├── 自定义指令6.html
│ ├── 自定义过滤器-双向过滤器.html
│ ├── 监听数据变化.html
│ ├── 自定义过滤器.html
│ ├── 监听数据变化2.html
│ ├── 自定义过滤器2.html
│ ├── 监听数据变化3.html
│ ├── 自定义过滤器3.html
│ ├── 自定义过滤器4.html
│ ├── 自定义键盘信息.html
│ ├── 计算属性的使用.html
│ ├── 自定义键盘信息2.html
│ ├── 计算属性的使用2.html
│ ├── 自定义键盘信息3.html
│ ├── 计算属性的使用3.html
│ ├── 自定义键盘信息4.html
│ └── 自定义键盘信息5.html
├── 03. Vue.JS 第三课
│ └── 课件
│ ├── bower_components
│ │ ├── animate.css
│ │ │ ├── LICENSE
│ │ │ ├── animate-config.json
│ │ │ ├── animate.css
│ │ │ ├── animate.min.css
│ │ │ ├── bower.json
│ │ │ ├── gulpfile.js
│ │ │ ├── package.json
│ │ │ └── source
│ │ │ ├── _base.css
│ │ │ ├── attention_seekers
│ │ │ │ ├── bounce.css
│ │ │ │ ├── flash.css
│ │ │ │ ├── headShake.css
│ │ │ │ ├── jello.css
│ │ │ │ ├── pulse.css
│ │ │ │ ├── rubberBand.css
│ │ │ │ ├── shake.css
│ │ │ │ ├── swing.css
│ │ │ │ ├── tada.css
│ │ │ │ └── wobble.css
│ │ │ ├── bouncing_entrances
│ │ │ │ ├── bounceIn.css
│ │ │ │ ├── bounceInDown.css
│ │ │ │ ├── bounceInLeft.css
│ │ │ │ ├── bounceInRight.css
│ │ │ │ └── bounceInUp.css
│ │ │ ├── bouncing_exits
│ │ │ │ ├── bounceOut.css
│ │ │ │ ├── bounceOutDown.css
│ │ │ │ ├── bounceOutLeft.css
│ │ │ │ ├── bounceOutRight.css
│ │ │ │ └── bounceOutUp.css
│ │ │ ├── fading_entrances
│ │ │ │ ├── fadeIn.css
│ │ │ │ ├── fadeInDown.css
│ │ │ │ ├── fadeInDownBig.css
│ │ │ │ ├── fadeInLeft.css
│ │ │ │ ├── fadeInLeftBig.css
│ │ │ │ ├── fadeInRight.css
│ │ │ │ ├── fadeInRightBig.css
│ │ │ │ ├── fadeInUp.css
│ │ │ │ └── fadeInUpBig.css
│ │ │ ├── fading_exits
│ │ │ │ ├── fadeOut.css
│ │ │ │ ├── fadeOutDown.css
│ │ │ │ ├── fadeOutDownBig.css
│ │ │ │ ├── fadeOutLeft.css
│ │ │ │ ├── fadeOutLeftBig.css
│ │ │ │ ├── fadeOutRight.css
│ │ │ │ ├── fadeOutRightBig.css
│ │ │ │ ├── fadeOutUp.css
│ │ │ │ └── fadeOutUpBig.css
│ │ │ ├── flippers
│ │ │ │ ├── flip.css
│ │ │ │ ├── flipInX.css
│ │ │ │ ├── flipInY.css
│ │ │ │ ├── flipOutX.css
│ │ │ │ └── flipOutY.css
│ │ │ ├── lightspeed
│ │ │ │ ├── lightSpeedIn.css
│ │ │ │ └── lightSpeedOut.css
│ │ │ ├── rotating_entrances
│ │ │ │ ├── rotateIn.css
│ │ │ │ ├── rotateInDownLeft.css
│ │ │ │ ├── rotateInDownRight.css
│ │ │ │ ├── rotateInUpLeft.css
│ │ │ │ └── rotateInUpRight.css
│ │ │ ├── rotating_exits
│ │ │ │ ├── rotateOut.css
│ │ │ │ ├── rotateOutDownLeft.css
│ │ │ │ ├── rotateOutDownRight.css
│ │ │ │ ├── rotateOutUpLeft.css
│ │ │ │ └── rotateOutUpRight.css
│ │ │ ├── sliding_entrances
│ │ │ │ ├── slideInDown.css
│ │ │ │ ├── slideInLeft.css
│ │ │ │ ├── slideInRight.css
│ │ │ │ └── slideInUp.css
│ │ │ ├── sliding_exits
│ │ │ │ ├── slideOutDown.css
│ │ │ │ ├── slideOutLeft.css
│ │ │ │ ├── slideOutRight.css
│ │ │ │ └── slideOutUp.css
│ │ │ ├── specials
│ │ │ │ ├── hinge.css
│ │ │ │ ├── rollIn.css
│ │ │ │ └── rollOut.css
│ │ │ ├── zooming_entrances
│ │ │ │ ├── zoomIn.css
│ │ │ │ ├── zoomInDown.css
│ │ │ │ ├── zoomInLeft.css
│ │ │ │ ├── zoomInRight.css
│ │ │ │ └── zoomInUp.css
│ │ │ └── zooming_exits
│ │ │ ├── zoomOut.css
│ │ │ ├── zoomOutDown.css
│ │ │ ├── zoomOutLeft.css
│ │ │ ├── zoomOutRight.css
│ │ │ └── zoomOutUp.css
│ │ ├── vue
│ │ │ ├── LICENSE
│ │ │ ├── bower.json
│ │ │ ├── dist
│ │ │ │ ├── vue.common.js
│ │ │ │ ├── vue.js
│ │ │ │ ├── vue.min.js
│ │ │ │ └── vue.min.js.map
│ │ │ └── src
│ │ │ ├── batcher.js
│ │ │ ├── cache.js
│ │ │ ├── compiler
│ │ │ │ ├── compile-props.js
│ │ │ │ ├── compile.js
│ │ │ │ ├── index.js
│ │ │ │ ├── resolve-slots.js
│ │ │ │ └── transclude.js
│ │ │ ├── config.js
│ │ │ ├── directive.js
│ │ │ ├── directives
│ │ │ │ ├── element
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── partial.js
│ │ │ │ │ └── slot.js
│ │ │ │ ├── internal
│ │ │ │ │ ├── class.js
│ │ │ │ │ ├── component.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── prop.js
│ │ │ │ │ ├── style.js
│ │ │ │ │ └── transition.js
│ │ │ │ ├── priorities.js
│ │ │ │ └── public
│ │ │ │ ├── bind.js
│ │ │ │ ├── cloak.js
│ │ │ │ ├── el.js
│ │ │ │ ├── for.js
│ │ │ │ ├── html.js
│ │ │ │ ├── if.js
│ │ │ │ ├── index.js
│ │ │ │ ├── model
│ │ │ │ │ ├── checkbox.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── radio.js
│ │ │ │ │ ├── select.js
│ │ │ │ │ └── text.js
│ │ │ │ ├── on.js
│ │ │ │ ├── ref.js
│ │ │ │ ├── show.js
│ │ │ │ └── text.js
│ │ │ ├── filters
│ │ │ │ ├── array-filters.js
│ │ │ │ └── index.js
│ │ │ ├── fragment
│ │ │ │ ├── factory.js
│ │ │ │ └── fragment.js
│ │ │ ├── global-api.js
│ │ │ ├── index.js
│ │ │ ├── instance
│ │ │ │ ├── api
│ │ │ │ │ ├── data.js
│ │ │ │ │ ├── dom.js
│ │ │ │ │ ├── events.js
│ │ │ │ │ └── lifecycle.js
│ │ │ │ ├── internal
│ │ │ │ │ ├── events.js
│ │ │ │ │ ├── init.js
│ │ │ │ │ ├── lifecycle.js
│ │ │ │ │ ├── misc.js
│ │ │ │ │ └── state.js
│ │ │ │ └── vue.js
│ │ │ ├── observer
│ │ │ │ ├── array.js
│ │ │ │ ├── dep.js
│ │ │ │ └── index.js
│ │ │ ├── parsers
│ │ │ │ ├── directive.js
│ │ │ │ ├── expression.js
│ │ │ │ ├── path.js
│ │ │ │ ├── template.js
│ │ │ │ └── text.js
│ │ │ ├── transition
│ │ │ │ ├── index.js
│ │ │ │ ├── queue.js
│ │ │ │ └── transition.js
│ │ │ ├── util
│ │ │ │ ├── component.js
│ │ │ │ ├── debug.js
│ │ │ │ ├── dom.js
│ │ │ │ ├── env.js
│ │ │ │ ├── index.js
│ │ │ │ ├── lang.js
│ │ │ │ └── options.js
│ │ │ └── watcher.js
│ │ └── vue-router
│ │ ├── README.md
│ │ ├── bower.json
│ │ ├── dist
│ │ │ ├── vue-router.js
│ │ │ └── vue-router.min.js
│ │ ├── issue_template.md
│ │ └── lib
│ │ ├── dsl.js
│ │ └── route-recognizer.js
│ ├── slot.html
│ ├── slot2.html
│ ├── slot3.html
│ ├── vue-loader-demo
│ │ ├── App.vue
│ │ ├── components
│ │ │ └── Menu.vue
│ │ ├── index.html
│ │ ├── main.js
│ │ ├── package.json
│ │ └── webpack.config.js
│ ├── vue组件-其他.html
│ ├── vue组件-模板.html
│ ├── vue路由-多层.html
│ ├── vue组件-其他2.html
│ ├── vue组件-模板2.html
│ ├── vue路由-多层2.html
│ ├── vue组件-其他3.html
│ ├── vue路由-多层3.html
│ ├── vue路由-多层4.html
│ ├── vue组件-另一个编写方式.html
│ ├── vue组件-另一个编写方式2.html
│ ├── vue动画.html
│ ├── vue组件.html
│ ├── vue路由.html
│ ├── vue动画2.html
│ ├── vue组件2.html
│ ├── vue路由2.html
│ ├── vue组件3.html
│ ├── vue路由3.html
│ ├── vue组件4.html
│ ├── vue动态组件.html
│ ├── vue父子组件.html
│ ├── vue父子组件2.html
│ ├── vue父子组件3.html
│ ├── vue父子组件4.html
│ ├── vue父子组件5.html
│ ├── vue父子组件6.html
│ └── 笔记.txt
├── 04. Vue.JS 第四课
│ ├── vue-loader-demo
│ │ ├── App.vue
│ │ ├── build.js
│ │ ├── components
│ │ │ ├── Detail.vue
│ │ │ ├── Home.vue
│ │ │ ├── Login.vue
│ │ │ ├── Menu.vue
│ │ │ ├── News.vue
│ │ │ └── Reg.vue
│ │ ├── index.html
│ │ ├── main.js
│ │ ├── package.json
│ │ ├── router.config.js
│ │ └── webpack.config.js
│ ├── vue-simple-demo
│ │ └── index.html
│ ├── vue-webpack-demo
│ │ ├── README.md
│ │ ├── build
│ │ │ ├── build.js
│ │ │ ├── dev-client.js
│ │ │ ├── dev-server.js
│ │ │ ├── utils.js
│ │ │ ├── webpack.base.conf.js
│ │ │ ├── webpack.dev.conf.js
│ │ │ └── webpack.prod.conf.js
│ │ ├── config
│ │ │ ├── dev.env.js
│ │ │ ├── index.js
│ │ │ ├── prod.env.js
│ │ │ └── test.env.js
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── App.vue
│ │ │ ├── assets
│ │ │ │ └── logo.png
│ │ │ ├── components
│ │ │ │ ├── Hello.vue
│ │ │ │ └── News.vue
│ │ │ └── main.js
│ │ ├── static
│ │ └── test
│ │ ├── e2e
│ │ │ ├── custom-assertions
│ │ │ │ └── elementCount.js
│ │ │ ├── nightwatch.conf.js
│ │ │ ├── runner.js
│ │ │ └── specs
│ │ │ └── test.js
│ │ └── unit
│ │ ├── index.js
│ │ ├── karma.conf.js
│ │ └── specs
│ │ └── Hello.spec.js
│ ├── vue-webpack-simple-demo
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── npm-debug.log
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── App.vue
│ │ │ └── main.js
│ │ └── webpack.config.js
│ └── 笔记.txt
├── 05. Vue.JS 第五课
│ └── 20161031Javascript之Vue.JS （第五讲）录播课件.rar
├── 06. Vue.JS 第六课
│ └── 20161115Javascript之VueJS（第六讲）课件.rar
└── 07. Vue.JS 第七课
└── 20161115Javascript之VueJS（第七讲）课件 .rar
72 directories, 397 files
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论