vue视频学习笔记01

video 1

vue:
读音: v-u-e
view

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}}" > 效果能出来,但是会报一个404错误
<img v-bind:src="url" > 效果可以出来,不会发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

时间: 2024-10-11 11:45:38

vue视频学习笔记01的相关文章

vue视频学习笔记

video 7 vue问题: 论坛 http://bbs.zhinengshe.com------------------------------------------------UI组件 别人提供好一堆东西 目的: 为了提高开发效率 功能 原则: 拿过来直接使用 vue-cli -> vue-loader //创建项目vue init webpack-simple bootstrap-demo //下载bootstrapbower install bootrap bootstrap: twi

vue视频学习笔记02

video 2 vue制作weibo交互 vue-> 1.0vue-resource ajax php服务器环境(node) this.$http.get()/post()/jsonp() this.$http({url:地址data:给后台提交数据,method:'get'/post/jsonpjsonp:'cb' //cbName});----------------------------------vue事件:@click=""数据: 添加一条留言: 获取某一页数据:ge

vue视频学习笔记03

video 3 git page:任何仓库 master分支,都可以发布(git page)-------------------------------------双向过滤器:Vue.filter(name,{read:write:});-------------------------------------1.02.0-------------------------------------引入 vue.js-------------------------------------bowe

vue视频学习笔记05

video 5 vue2.0:bower info vue http://vuejs.org/到了2.0以后,有哪些变化? 1. 在每个组件模板,不在支持片段代码组件中模板:之前:<template><h3>我是组件</h3><strong>我是加粗标签</strong></template>现在: 必须有根元素,包裹住所有的代码<template id="aaa"><div><h3&

vue视频学习笔记04

video 4 手动配置自己:webpack+vue-loader webpack加载模块-------------------------------------如何运行此项目?1. npm install 或者 cnpm install2. npm run dev-> package.json"scripts":{"dev":"webpack-dev-server --inline --hot --port 8082"} 以后下载模块:

vue视频学习笔记06

video 6 vue动画vue路由--------------------------------------transition 之前 属性<p transition="fade"></p> .fade-transition{}.fade-enter{}.fade-leave{}-------------------------------------- 到2.0以后 transition 组件 <transition name="fade&

vue视频学习笔记07

video 7 vue问题:论坛http://bbs.zhinengshe.com------------------------------------------------UI组件别人提供好一堆东西 目的: 为了提高开发效率功能 原则: 拿过来直接使用 vue-cli -> vue-loader //创建项目vue init webpack-simple bootstrap-demo //下载bootstrapbower install bootrap bootstrap:twitter

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

【opengl 学习笔记01】HelloWorld示例

<<OpenGL Programming Guide>>这本书是看了忘,忘了又看,赶脚还是把笔记做一做心里比较踏实,哈哈. 我的主题是,好记性不如烂笔头. ================================================================ 1. 下载glut库 glut库地址为:www.opengl.org/resources/libraries/glut/glutdlls37beta.zip glut全称为:OpenGL Utilit