vue

vue.js 插件  setting--> plugins 搜索vue,下载安装
如果想要高亮显示*.vue文件，可以在File Types 选项里找到HTML，然后在下方手动添加*.vue，这样就有高亮啦。

vue2.0 入门

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>vue</title>

    <style>

        h1{border-bottom: 1px solid green;}

    </style>

    <script src="//cdn.bootcss.com/vue/2.0.3/vue.js"></script>

</head>

<body>

<!-- 1.最简 vue -->

<h1>1.最简vue</h1>

<div class="app">

    {{message}}

</div>

<script>

    var app= new Vue({

        el:'.app',     // 这里是 el

        data:{

            message:'hello vue'

        }

    });

    app.message='how are you'; // 可动态改内容

</script>

<!-- 2 第二种绑定 v-bind -->

<h1>2 第二种绑定 v-bind</h1>

<div id="app-1">

    <span v-bind:title="message" >mouseover me </span><br/>   <!-- 给span 添加一个title属性 -->

    <span v-bind:id="id">i am span</span> <br/>          <!-- 给span 添加一个 id 属性 -->

    <span :id="id2">the second span</span>    <!-- 简写为 : -->

</div>

<script>

    var app1=new Vue({

        el:'#app-1',

        data:{

            message:'how are you'+ new Date(),

            id:'span1',

            id2:'span2'

        }

    });

</script>

<!-- 3 。if -->

<h1>3.if</h1>

<div id="app2">

    <p v-if="seen">i will show</p>

    <p v-if="show">i won't shown</p>

</div>

<script>

    var app2=new Vue({

        el:'#app2',

        data:{

            seen:true,

            show:false

        }

    });

</script>

<!-- 4  for  -->

<h1>4 v-for</h1>

<div id="app3">

    <ul>

        <li v-for="list in lists">

            {{list.key}}

        </li>

    </ul>

</div>

<script>

    var app3=new Vue({

        el:'#app3',

        data:{

            lists:[       /*  数组对象*/

                {key:'a'},

                {key:'b'},

                {key:'c'}

            ]

        }

    });

    app3.lists.push({key:'d'});

</script>

<!-- 5 .v-on:click 事件绑定-->

<h1>5 .v-on:click 事件绑定</h1>

<div id="app5">

    <p>{{message}}</p>

    <button v-on:click="test">btn</button>

    <button @click="test2">btn2</button>        <!--  事件绑定 简写为  @  -->

</div>

<script>

    var app5=new Vue({

        el:'#app5',

        data: {

            message: 'test one',

        },

        methods:{           /* 注意关键字 */

            test: function () {

                this.message+=' is ok';

            },

            test2: function () {

                this.message+=' is error';

            }

        }

    });

</script>

<!-- 6 v-model 表单-->

<h1>6 v-model 表单</h1>

<div id="app6">

    <p>{{message}}</p>

    <input type="text" v-model="message"/>

</div>

<script>

    var app6=new Vue({

        el:'#app6',

        data:{

            message:'input your name'

        }

    });

</script>

<!--7 组件-->

    <h1>7 组件</h1>

<div class="app7">

    <ul>

        <item></item>

    </ul>

</div>

<script>

    Vue.component('item',{

        template:'<li>this is content</li>'

    });

    var app7=new Vue({

        el:'.app7'

    });

</script>

<!-- 7.0 组件  props -->

    <h1>7.0组件  props 传值</h1>

<div class="app70">

    <my-component v-bind:message="message"></my-component>

</div>

<script>

    Vue.component('my-component',{

        props:['message'],

        template:'<div>{{message}}</div>'

    });

    var app=new Vue({

        el: '.app70',

        data: {

            message: 'this is the message'

        }

    });

</script>

<!-- 7.1 组件  props -->

    <h1>7.1组件 props</h1>

<div class="app71">

    <ul>

        <item v-for="list in lists" v-bind:list="list"></item>   <!-- 把 props 的list 跟 html的 list绑定 -->

    </ul>

</div>

<script>

    Vue.component('item',{

        props:['list'],   /* 数据传递*/

        template:'<li>{{list.key}}</li>'

    });

    var app7=new Vue({

        el:'.app71',

        data:{

            lists:[

                {key:'aa'},

                {key:'bb'},

                {key:'cc'}

            ]

        }

    });

</script>

<h1>8 vue 实例 属性与方法</h1>

    <code>var vm = new Vue({

            // 这就是vue实例

        });

    </code>

    <h2>属性和方法</h2>

<div class="app8">

    {{a}}

</div>

<script>

    var data={a:1}

    var vm=new Vue({

        el:'.app8',

        data:data    /* 可以把数据独立出来*/

    });

    vm.a=2;  // 可以改a的值

    data.a=3; // 可以改a 的值

</script>

<h1>9.计算属性 computed </h1>

<p>一般用计算机属性解决，计算属性是基于它的依赖缓存，即已有数据，只要 message不变，访问 res 会马上出结果，不用执行函数</p>

<div class="app9">

    <p>first:{{message}}</p>

    <p>res:{{res}}</p>

</div>

<script>

    var vm=new Vue({

        el:'.app9',

        data:{

            message:'hello'

        },

        computed:{

            res: function () {

                return this.message.split('').reverse().join('')    /*  计算属性基于已有数据*/

            }

        }

    });

</script>

<h1>9.1计算属性 computed vs method</h1>

<div class="app91">

    <p>first:{{message}}</p>

    <p>res:{{res()}}</p>                                           <!-- 这里要加个 ()   ! -->

    <button @click="res2">btn</button>

</div>

<script>

    var vm=new Vue({

        el:'.app91',

        data:{

            message:'hello'

        },

        methods:{

            res: function () {

                return this.message.split('').reverse().join('');   // return

            },

            res2: function () {                                       //   坑！

                this.message=this.message.split('').reverse().join('');

               // this.message+=' xx';

            }

        }

    });

</script>

</body>

</html>

vue2.0 入门2

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        p{border-bottom: 1px solid green;line-height: 30px;}

        .color{color:red;}

        .fontsize{font-size: 30px;}

    </style>

    <script src="//cdn.bootcss.com/vue/2.0.3/vue.js"></script>

</head>

<body>

<p>1.class 切换 v-bind 可以简写为 ： </p>

    <div class="app1">

        <!--<span v-bind:class="{color:isColor,fontsize:isFontsize}">test</span>-->

        <span :class="{color:isColor,fontsize:isFontsize}">test1</span>

    </div>

<script>

    var app1=new Vue({

        el:'.app1',

        data:{

            isColor:true,

            isFontsize:false

        }

    });

</script>

<p>1.1 绑定对象样式 +计算属性【主要】  其他形式看手册</p>

<div class="app2">

    <span :class="classObject">test2</span>

</div>

<script>

    var app2=new Vue({

        el:'.app2',

        data:{

            isColor:false,

            isFontsize:true

        },

        computed:{

            classObject: function () {

                return{

                    color:this.isColor,

                    fontsize:this.isFontsize

                }

            }

        }

    });

</script>

<p>3 条件渲染 v-if 看手册</p>

<p>4 v-for 数组对象,+相同信息，索引</p>

<div class="app4">

    <ul>

        <li v-for="(list,index) in lists">     <!--  list 要写在 index 前面 -->

            {{otherMessage}}{{index}} : {{list.key}}   <!-- 添加相同信息，索引 -->

        </li>

    </ul>

</div>

<script>

    var app4=new Vue({

        el:'.app4',

        data:{

            otherMessage:'list: ',

            lists:[                /*数组对象*/

                {key:'a'},

                {key:'b'},

                {key:'c'},

            ]

        }

    });

</script>

<p>4.1 v-for 对象</p>

<div class="app41">

    <ul>

        <li v-for="value in person">

            {{value}}    <!--  直接 value 不方便取指定数据-->

        </li>

    </ul>

</div>

<script>

    var app41=new Vue({

        el:'.app41',

        data:{

            person:{

                name:'xiao',

                age:12,

                hobby:'swiming'

            }

        }

    });

</script>

<p>5 列表渲染有一个完整的todo list的例子先跳过、数组特性也跳过;</p>

<p>6.事件处理 v-on 简写 @  可传参数、event. preventDefault()、按键</p>

<div class="app6">

    <button @click="test('haha')">btn</button>

    <form @submit.prevent="submit"></form>   <!--  event. preventDefault() 封装了-->

    <input placeholder="输入回车就可以提交" @keyup.enter="submit">  <!--输入回车调用提交-->

</div>

<script>

    var app6=new Vue({

        el:'.app6',

        data:{

        },

        methods:{

            test: function (mes) {

                alert(mes+" is here");

            },

            submit: function () {

                alert("ok。。");

            }

        }

    });

</script>

<p>7.表单 v-model  至少要设置 data.message='' </p>

<div class="app7">

    <input type="text" v-model="message"/>{{message}}

    <input type="checkbox" v-model="checked" id="checkbox"/> <label for="checkbox">{{checked}}</label>

</div>

<script>

    var app7 = new Vue({

        el:'.app7',

        data:{

            message:'',

            checked:false

        }

    });

</script>

<p>8.1全局组件要在实例前</p>

<div class="app81">

    <item></item>

</div>

<script>

    Vue.component('item',{   /* 全局注册，也可以局部注册 */

        template:'<div>this is component</div>'

    });

    var app81=new Vue({

        el:'.app81'

    });

</script>

<p>8.2组件局部注册 is 组件 </p>

<div class="app82">

    <item></item>

</div>

<script>

    var child={

        template:'<div>this is xxx</div>'

    }

    var app82=new Vue({

        el:'.app82',

        components:{      /* 要加一个s    methods 方法也要加一个s */

            'item':child

        }

    });

    /*<table>

        <tr is="my-row"></tr>     某些标签对组件识别不了时，用is

    </table>*/

</script>

<p>8.3 $emit</p>

<div id="counter-event-example">

    <span>{{ total }}</span>

    <button-counter v-on:increment="incrementTotal"></button-counter>     <!-- 子组件再绑定事件关联父组件-->

    <button-counter v-on:increment="incrementTotal"></button-counter>

</div>

<script>

    Vue.component('button-counter', {

        template: '<button @click="increment">{{ counter }}</button>',

        data: function () {

            return {

                counter: 0

            }

        },

        methods: {

            increment: function () {    /* 子组件绑定事件 */

                this.counter += 1

                this.$emit('increment')      /* 子组件要跟父组件通信*/

            }

        },

    })

    new Vue({

        el: '#counter-event-example',

        data: {

            total: 0

        },

        methods: {

            incrementTotal: function () {

                this.total += 2

            }

        }

    })

</script>

</body>

</html>

vue2.0 入门3

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        p{line-height: 40px;border-bottom: 1px solid green;}

    </style>

    <script src="//cdn.bootcss.com/vue/2.0.3/vue.js"></script>

</head>

<body>

<p>1.标准</p>

    <div class="app">

        {{message}}

    </div>

    <script>

        var app=new Vue({

            el:'.app',

            data:{

                message:123

            }

        });

    </script>

<p>2. x-templates</p>

<div class="app2">

    <my></my>

</div>

<script type="text/x-template" id="test">

    <h1>hahahah</h1>

</script>

<script>

    Vue.component('my',{

        template:'#test'

    })

    var app2=new Vue({

        el:'.app2'

    });

</script>

<p>3.自定义指令</p>

<div class="app3">

<input type="text" v-focus/>

</div>

<script>

    var app3=new Vue({

        el:'.app3',

        directives:{

            focus:{

                inserted: function (el) {

                    el.focus()

                }

            }

        }

    });

</script>

</body>

</html>

组件 props

<p>7.1组件  props 【】</p>

<div class="a71">

    <ul>

        <item v-for="a in lists" :b="a"></item>   <!--  注意 a b     a :b=a -->

    </ul>

</div>

<script>

    Vue.component('item',{

        props:['b'],                      /* b  b */

        template:'<li>{{b.key}}</li>'

    });

    var app71=new Vue({

        el:'.a71',

        data:{

            lists:[

                {key:'adda'},

                {key:'bb'},

                {key:'cc'}

            ]

        }

    });

</script>

vux

vue 

vue-cli 生成项目

1. npm install -g vue-cli

2. vue init webpack#1.0 myvue   // 默认安装 2.0的vue

3. npm install  // 安装node_module   可以复制 node_module文件夹放进去就可以了

4. npm install vux // 安装 vux

5. npm install less less-loader --save-dev  // 安装  less  less-loader

5. npm run dev // 运行

vue-cli 改8080端口位置  config/index.js  

vux 基于vue 和 WeUI(微信UI) 

vux demo

https://vux.li 

vue1.0

http://vuejs.org.cn/guide/

webpack

http://webpack.github.io/

https://github.com/vuejs/vue-loader

ES6

http://es6.ruanyifeng.com/

vue-router

https://github.com/vuejs/vue-router

组件换名字

{

    components:{

        xalert: Alert

    }

}

或者全局时

Vue.component('xalert',vuxAlert)

vux 兼容 android 4.0+

2016-4-19 微信 android x5 内核 升级到Blink 兼容flex 

vux  使用 es6  eslint(规范换行、标点符号等)

使用 const let 代替 var

使用 import 

组件名  x-input

export 出来的  XInput Radio XTextarea

子组件  flexbox flexbox-item   tab  tab-item 

组件全放在 src/components 入口文件为 index.vue 其他为 tab.vue  tab-item.vue

组件属性 规定type 或 validator 进行类型验证 

事件命名  on-change 添加on前缀

class 和 style 超过两个属性要写到 computed 里 

版本发布见文档P13 ，跳过

playground 见文档 P15 ,跳过 

在 webpack.base.conf.js 添加 loader

    {

        test: /vux.src.*?js$/,

        loader: 'babel'

    }

    resolve:{

        alias:{

            'vux-components':'vux/src/components/'   // 路径缩写

webstorm  是否在新窗口中打开

setting-apperance & Behavior -system setting -project opening 

第19页

如何阻止vue进行属性代理 object.preventExtensions obj.seal() obj.freeze()

方法禁止增加属性禁止删除属性禁止修改属性
Object.preventExtensions() 是否否
Object.seal() 是是否
Object.freeze() 是是是

以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

所以，使用_或$是一种解决办法。 当然，还有其它的方式，你可以在create钩子中直接声明指定的属性初始化，例如this.xxxx_prop = {}，当然，不要让该属性声明在data中，那么此时vue不会去监测xxxx_prop属性的变动。 还有一种办法是使用ES5的Object.preventExtensions来将对象进行密封，或者使用Object.freeze冻结对象，它们都可以达到相同的目的。

vue的更多相关文章

ASP.NET MVC+Vue.js实现联系人管理
接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...
Vue学习记录-状态管理
要解决的问题平时的系统开发中,基本都会碰到这个权限问题,需要根据用户的登录状态进行处理.最常见的情况就是“先登录,后使用”.除去打包成APP,无法看到连接外,如果地址栏里直接输入地址就能绕过登录的话 ...
vue中使用key管理可复用的元素
1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...
应用四：Vue之VUEX状态管理
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应 ...
vue入门：用户管理demo
该demo纯前端实现使用到vue技术点: 1.在该demo中使用到的vue指令:{{}}. v-if. v-model. @click v-for 2.在该demo中使用到的事件修饰符: .prev ...
vue入门：用户管理demo1
该demo由前端请求后台服务器获取数据进行渲染使用到的技术点 1.使用到的vue指令:{{}} v-if v-for v-model 2.使用到的事件:@click 点击事件, @keyup.ent ...
前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见谢谢- vuex理解采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解属性理解 state 驱动应用的数据源 ...
vue+elementui搭建后台管理界面(1登录)
1 node环境安装从 node官网下载安装包 2 vue-cli npm install vue-cli -g 3 新建项目 vue init webpack vue-project 可保持默认, ...
vue+elementui搭建后台管理界面(7 vuex和mockjs的使用)
将权限管理应用到系统,首先做好登录, 点击登录按钮后,触发以下动作 vuex 中的 login 动作,设置 cookie vuex 中的 getuserinfo , 获取权限.用户名.头像等由于目前 ...
vue项目--vuex状态管理器
本文取之官网和其他文章结合自己的理解用简单化的语言表达.用于自己的笔记记录,也希望能帮到其他小伙伴理解,学习更多的前端知识. Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态 ...

随机推荐

delphi 取cpu号
从网上找的取cpu号在d7中测试通过了 push,move,pop ...有点难现在的水平我也就只能拿来主义了 /// <summary>/// 取cpu号/// </summa ...
HTML+CSS知识点总结
转自:http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=refer ...
MapReduce实现手机上网日志分析（分区）
一.问题背景实际业务的需要,比如以移动为例,河南的用户去了北京上网,那么他的上网信息默认保存在了北京的基站,那么我们想要查询北京地区的上网日志信息默认也包含了其他地区用户的在本区的上网信息,否则只能 ...
HTML5 图片缩放功能
腾讯新闻上用的插件(xw.qq.com) 缩放插件scale.js (function(window, undefined) { var document = window.document, sup ...
6种php发送get、post请求的方法简明归纳与示例
方法1: 用file_get_contents 以get方式获取内容: <?php $url='http://www.jb51.net/'; $html = file_get_contents( ...
java支持跨平台获取cpuid、主板id、硬盘id、mac地址（兼容windows、Linux）
windows: package cn.net.comsys.helper.system.info; import java.io.BufferedReader; import java.io.F ...
EmguCV(OpenCV)实现高效显示视频（YUV）叠加包括汉字
视频处理中,往往需要在上面增加文字包括汉字英文字母数字标点等,Emgu.CV/opencv 绘图线面文字包括中文这篇里也有相关介绍,但是这篇里根据逐像素修改rgb值的方法效率太低查了很多资料,基 ...
理清Java中的编码解码转换
1.字符集及编码方式概括:字符编码方式及大端小端详细:彻底理解字符编码可以通过Charset.availableCharsets()获取Java支持的字符集,以JDK8为例,得到其支持的字符集: ...
Fedora 23安装 NS2 (network simulator 2)
1 实验环境 OS: Fedora 23 workstation 2 实验步骤 ( 参考了:http://www.isi.edu/nsnam/ns/ns-build.html) 本次实验的实验环境: ...
Linux cp (复制)命令简介
\cp -rf source1 source2 source3 .... directory cp (复制档案或目录) [root@linux ~]# cp [-adfilprsu] ...

vue

vue的更多相关文章

随机推荐

热门专题