vue

2022-11-21 21:46:36

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冻结对象，它们都可以达到相同的目的。

码农公寓

相关文章