官网
http://cn.vuejs.org/
mvvm 框架 -- 比 angular 更小巧, 文档阅读方便, 全部组件化
版本 2.0
指令以 v-xxx
一段 html 代码 加一个 json 再 new 出一个 vue 实例
适合做移动端开发 比较小巧
上手简单
angular 适合 pc 端开发
上手难
指令一 ng-xxx
属性和方法都在 $scope 上
这两个都不兼容 ie 低版本 ie8 以下不兼容
第一步 拿到 vue 的 库文件
vue.min.js 最新的 2.0 以上版本
思想:
m 数据 data
v 视图 html
c 控制器 new vue()
vue 的雏形
要求: 展示一条数据
- html:
- <div id="box">
- {{msg}}
- </div>
- js:
var c = new Vue({ new 出 Vue 额对象
el:'#box', 选择器, 和 jquery 一样
data:{ data 里可以放字符串, json , 数组, 布尔, 数字
msg:'document' 要展示的数据内容
- num:12,
- boor:true
- .......
- }
- });
注意: 这里的 c 是可以任意起名的, 也可以不写, 不写的话就是 this. 想要拿到里面的 num 的值, 可以这样 this.data.num
vue 常用的指令
v-model 一般放在表单元素上 双向数据绑定
- html
- <div id="box">
- <input type="text" v-model="msg" />
- <input type="text" v-model="msg" />
- </div>
v-repeat 循环
- <!-- 循环 -->
- <!--2.0 版本后 $key,$index, 失效了?-->
- <!-- 后来查阅了文档才知道, 这是因为在 Vue2.0 中, v-for 迭代语法已经发生了变化:
- 丢弃了:
- 新数组语法
- value in arr
- (value, index) in arr
- 新对象语法
- value in obj
- (value, key) in obj
- (value, key, index) in obj
- -->
- html
- <div id="box">
- <ul>
- <li v-for="(value, index) in arr">
- {{value}} {{index}}
- </li>
- <hr />
- <li v-for='(key,value,index) in json'>
- {{value}} {{key}} {{index}}
- </li>
- </ul>
- </div>
事件 --- v-on
- click
- var c = new Vue({
- el:'#box',
- data:{
- arr:['1','2','age'],
- json:{'a':11,'b':22,'c':33}
- },
methods:{ 事件方法到 dethods 里
事件名: function(){
- alert(1)
- // 要求弹出 json 的 c 的值
- alert(this.json.c)
- }
- }
- });
- v-on:click = "事件名 ()" ddlclick mouseover mouseout ......
深入:
v-on:click="show()" 一般是这样
@click="show()" 这是简写 建议用
事件对象:
$event 定死的, 必须有 $
- @click(show($event))
- methods:{
- show:function(ev,n){
- alert(ev.clientX)
- alert(n)//n 也可以拿到
- // 这里可以拿到事件对象, 可以用原生写了
- }
- }
- <input id="btn" type="button" value="按钮" @click="show($event,3)" />
事件冒泡:
ev.cancelBubble=true;
事件对象 加 原生里的阻止冒泡方法 cancelBubble=true
@click.stop="show()" 火狐, 谷歌支持, ie 不测试
直接在 c 事件后加 stop
阻止事件默认行为:
ev.preventDefaule=true;
事件对象 加 原生里的阻止默认行为
@contextmenu.prevent="show1()"
键盘事件:
onkeydown onkeyup
ev.keycode 获取到键码
也可以 @keydown.enter="show()"
up 上
left 左
常用键都封装了. 字母没有
等 方便快速
显示隐藏
v-show
v-show='true/false'; true 是显示 false 是隐藏
要求点击一个按钮让一个对象隐藏:
- html:
- <input type="button" v-on:click="a=false"/>
- <div v-show='a'></div>
在 data 里设置 a=true, 意思就是刚开始是显示的 在点击按钮后把数据 a 变成 false 传给 v-show
data{
a:true
}
要求点击一下隐藏再点一下显示依次往下走:
核心代码:
- show:function(){
- if(this.a==false){
- this.a=true;
- }else{
- this.a=false;
- }
- }
- <input type="button" v-on:click="show()"/>
写个方法判断 a 的值并且赋值
留言信息表例子思路
数据第一, 有数据 vue 自会给你渲染视图
1.v-on:click 把 input 里的数据存到 data 里 再用 v-for 渲染(注意数据格式), 在此之前在 input 上加 v-model(把数据存在 this 上)
2. 删除一个的时候需要拿到本条的 index 在 data 里删数据(一般是数组).
3. 删除全部需要存一个变量 newIndex=index, 这样在下面调用的时候就可以删除, 详细看 demo
==============================
属性:
- <img src="{{url}}"/>
- <img v-bind:src='url' />
简写 <img :src='url' />
v-bind 是 vue 专门绑定属性的
- <!--<img src="{{url}}" id="img"/>-->
- <!-- 属性数据中 被 2.0 丢弃这种写法 , 之前这样写会有效果但是会报 404 错, 所以用以下这种方法:-->
- <img v-bind:src="url" id="img"/>
- <img :src="url" id="img" :width='a'/>
特殊属性
class
:class=[red,blue] 对应的是数据
- data{
- red:'red',
- blue'blue'
- }
:class="{red:a,blue:b}" 对应的是 类名和数据
- data{
- a:true,
- b:false
- }
也可以吧 json 直接写到数据里, 看起来更舒服 - 推荐
- :clsss="json";
- data{
- json:{
- red:true,
- blue:false
- }
- }
style 和 class 的用法一样
:styel=[c,d];/. 每一个样式都是一条 json
- data:{
- c:{color:'red'},
- d:{backgroundColor:'blue'}// 复合样式用驼峰命名法
- }
- :style={json};
- data:{
- json{
- color:"red",
- background:"blue"
- }
- }
- ========================
模版
http://www.cnblogs.com/jiangxiaobo/p/6068025.html
{{msg}} 数据双向绑定 数据更新模版也会跟着更新
{{msg}} 数据只绑定一次 数据更新不更新模版 已失效
- <p v-once>{{msg}}</p>
- <!-- 之前是{{msg}} 2.0 后 需要加 v-once 作用是 添加一次性模版 不支持数据更新 -->
{{{msg}}} 数据转译输出 转成 html 已失效
<p v-html='msg'>{{msg}}</p>
新的指令 v-once 和 v-html 需要绑定数据
==============
vue2.0 之前 过滤器
体统提供一些过滤器
{{msg| 过滤器 1}}
{{msg| 过滤器 1 | 过滤器 2}}
常用的过滤器有
- uppercase
- lowercase
- capitalize
vue2.0 之后废除过滤器, 所以需要自己定义过滤器
语法:
Vue.filter('过滤器名',function(){})
例如首字母大写的过滤器这样写
- <div id="app">
- {{message|uppercase}}
- </div>
- // 过滤器
- Vue.filter('uppercase', function(value) {
- if (!value) { return ''}
- value = value.toString()
- return value.charAt(0).toUpperCase() + value.slice(1)
- })
过滤器必须写在 vue 对象之前才会生效
- var vm = new Vue({
- el:'#app',
- data: {
- message: 'test'
- }
- }
- -------------
常用过滤器 封装
- // 全部大写
- Vue.filter('Uppercase',function(value){
- if(!value){return ''}
- value = value.toString();
- return value.toUpperCase();
- })
- // 全部小写
- Vue.filter('lowercase',function(value){
- if(!value){return ''}
- value = value.toString();
- return value.toLowerCase();
- })
- // 把时间戳转换成北京时间 ---1
- Vue.filter('time', function (value) {
- return new Date(parseInt(value) * 1000).toLocaleString().replace(/ 年 | 月 / g, "-").replace(/ 日 / g, " ");
- })
- // 把时间戳转换成北京时间 ---2 比较麻烦了 (原生) 优点不依赖框架
- Vue.filter('time',function(value){
- function toDou(n){
- return n<10?'0'+n:''+n;
- }
- var oDate = new Date(value*1000);
- return oDate.getFullYear()+'-'+toDou(oDate.getMonth()+1)+'-'+toDou(oDate.getDate())+''+toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds());
- })
- // 补零
- Vue.filter('todou', function (n) {
- return n<10?'0'+n:''+n;
- })
- ----------------
- ==================================
交互
本身 vue.js 不提供交互, 需要引 vue 的交互模块
- vue-resource.min.js
- get
获取数据
- methods:{
- show:function(){
- this.$http.get('22.txt').then(function(res){
- alert(res.data)
- },function(res){
- alert(res.status)
- })
- }
- }
2.0 之后 get 发送数据貌似不好使, 没深究, 用 post 就行了 ---- 不使用 min 版 js 就行
发送数据
- post
- methods:{
- show:function(){
- this.$http.post('get.php',{
- a:2, // 参数 json 发送数据
- b:3
- },{
- emulateJSON:true// 加个声明
- }).then(function(res){
- alert(res.data)
- },function(res){
- alert(res.status)
- })
- }
- }
- jsonp
- <!--
- vue-resource.min.js 不能用于 jsonp 还有 连接 php 文件时有问题
- 请使用 vue-resource.js 太坑了 以后再也不用 min 版了.
- -->
获取接口
https://sug.so.360.cn/suggest?word=a 好搜的接口
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd = 百度
- js:
- methods:{
- show:function(){
- this.$http.jsonp('https://sug.so.360.cn/suggest',{ // 接口末尾不能有空格
- word:'a' // 搜索的内容
- }).then(function(res){
- console.log(res.data.s)
- },function(res){
- alert(res.status)
- })
- }
- }
百度搜索下拉
看 dome 吧
get 练习 微博留言板
注意事项
数据 data 中数据变量名 和 事件函数名不要一样 不然找事件会找不到 this 先在数据变量里找 再去 找事件
来源: http://www.qdfuns.com/article/39334/2a9fab13a30bcbfaf14a684df3f6c93a.html