vue

最新推荐文章于 2025-08-23 20:36:09 发布

weixin_30914981

最新推荐文章于 2025-08-23 20:36:09 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/gyz418/p/6026992.html

本文详细介绍Vue.js的基础用法，包括绑定、条件渲染、事件处理、表单、组件及计算属性等核心概念，并提供了丰富的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

View Code

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>

View Code

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>

View Code

组件 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>

View Code

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页

View Code

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

转载于:https://www.cnblogs.com/gyz418/p/6026992.html