vue

来源：互联网发布：淘宝联盟订单失效编辑：程序博客网时间：2024/06/05 16:29

一.

angular适合很大的项目mvvm，react干什么都行的组件式，vue是个轻量级mwwm适合中小型应用。

感觉react全家桶未来应该会走红，中小项目里vue会是不错的选择，angular在版本稳定下来之前还是先观望吧。。

顺便说下上手难度，vue不难（只要不是一上来就webpack，cli），angular1.x也不难（2.x没用过，感觉改的有点多，等版本相对稳定再说），react曲线感觉难一点点。

火大概是raect>angular>vue的，但angular在降温，react在继续上升，vue也在上升期。

官网： http://vuejs.org/ （可选中文版）

Api : https://cn.vuejs.org/v2/api/

相关网址：https://www.awesomes.cn/repo/yyx990803/vue

文章：http://www.wtoutiao.com/p/6e4lwMF.html

个人案例：http://web.jobbole.com/89976/

官网vue资料总结：

1.Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

另一方面，Vue 完全有能力驱

动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue 内部封装好的参数，函数：

相关网址： http://www.cnblogs.com/like-xcm/p/5956848.html

var vm = new Vue({

el: "选择器", 挂载到页面的那个元素里，即确定vue的作用范围外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作

a: '', //自定义属性外部可通过vm.$options访问
data: { }, //实例属性都在这里面，外部通过实例名,即vm.$data调用

computed: { }, //计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性

method: { }, //实例方法都在这里

watch: { }, //对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在外部通过$.watch调用

created: function(){ 实例已经创建 }

beforeCompile: function(){ 模块编译之前 }

compiled: function(){ 模块编译之后；即模板占位符被是内容替换}

ready: function(){ 模板插入到文档中了；相当于window.onload }

beforeDestroy: function(){ 对象销毁之前 }

destroyed: function(){ 对象销毁之后 }

});

注意：

①以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问

②在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入

③以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用实例名.$destory()才执行

二.

代码： ①按照平常的html页面写（第一个例子引入jq，后面都不需要jq）

②同时引入 vue.js ，以及就专门的vue使用语法

（vue.js 地址： https://unpkg.com/vue/dist/vue.js）

1.第一个例子： hello vue

<body>

        {{ message }}
    </div>
    <script src="../js/jquery-1.8.2.min.js"></script>
    <script src="../js/vue.js"></script>
    <script>
        $(function(){
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
            app;
            console.log(app.$data);
        })
    </script>
</body>

console.log(app.$data);

注意： ①在控制台更改message的值，页面中的值也会随着变化

② 只在第一次打印hellovue时：app 需要再执行一次，页面才能显示输出message的值，

③输出 app message信息时，html页面内 {{message}} 要写在 el 所代表的 id 标签内部

三.

1.v-bind 指令：控制台显示message信息已添加上新内容，但是没显示出来

指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性

<div id="app-2">
    <span v-bind:title="message"> 在原有内容基础上添加新内容 </span>
    <p> {{message}}}</p>   <!--js新增内容 Tue Feb 07 2017 15:31:58 GMT+0800 (中国标准时间)}-->
</div>


<script src="../js/jquery-1.8.2.min.js"></script>
<script src="../js/vue.js"></script>
<script>
    $(function(){
        var app2 = new Vue({
            el: '#app-2',
            data: {
                message: 'js新增内容 ' + new Date()
            }
        })
        app2;
        console.log(app2.message);
        console.log(app2.$data);
    })
</script>

注意：

①console.log(app2.$data)

②console.log(app2.message);

四.

1.v-if

app3: seen:true 显示p标签内容

app3 seen: false 隐藏p标签内容

<div id="app-3">
    <p v-if="seen">Now you see me</p>
</div>

<script src="../js/jquery-1.8.2.min.js"></script>
<script src="../js/vue.js"></script>
<script>
    $(function(){
        var app3 = new Vue({
            el: '#app-3',
            data: {
                seen: true
            }
        })
    })
</script>

注意： 这个例子演示了我们不仅可以绑定 DOM 文本到数据，

           也可以绑定 DOM 结构到数据

1.v-for

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

<script src="../js/jquery-1.8.2.min.js"></script>
<script src="../js/vue.js"></script>
<script>
    $(function(){

        var app4 = new Vue({
            el: '#app-4',
            data: {
                todos: [
                    { text: 'Learn JavaScript' },
                    { text: 'Learn Vue' },
                    { text: 'Build something awesome' }
                ]
            }
        })
    })
</script>

输出： console.log(app4.todos.push({ text: 'New item' }))

发现： ul列表又添加了一行数据

五.

1.v-on : click=“函数（方法）名”

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script src="../js/jquery-1.8.2.min.js"></script>
<script src="../js/vue.js"></script>
<script>
    $(function(){
        var app5 = new Vue({
            el: '#app-5',
            data: {
                message: 'Hello Vue.js'
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split(' ').reverse().join(' , ')
                }
            }
        })
    })
</script>

触发事件前 触发事件后

2.v-on : click=“函数（方法）名”

<div id="app">
    <button v-on:click="counter += 1">增加 1</button>
    <button v-on:click="counter -= 1">减少 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>


<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    })
</script>

2.v-on : click=“函数（方法）名”

<button v-on:click="greet">Greet</button>

var app = new Vue({
    el: '#app',
    data: {
        counter: 0,
        info: "hello world"
    },
    methods: {
        greet: function(event){
            alert(this.info)
        }
    }
})

注意：methods 有 s,不然会报错（greet not defined）

2.v-on :keyup.键名="函数名"

<input v-on:keyup.13="submit"/>
<input v-on:keyup.enter="submit"/>

methods: {
    greet: function(event){
        alert(this.info)
    },
    say: function(msg){
        alert(msg);
    },
    warn: function (message, event) {
        // 现在我们可以访问原生事件对象
       console.log(event)
        if (event) event.preventDefault()
        alert(message)
    },
    submit: function(){
        console.log("按键13触发")
    }
}

全部的按键别名：

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

六.

添加id，属性href,disabled等 - javascript语句判断 - 事件绑定 - 过滤器

1.v-model ：输入框的内容改变，p标签的内容也随之改变。

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script src="../js/jquery-1.8.2.min.js"></script>
<script src="../js/vue.js"></script>
<script>
    $(function(){
        var app6 = new Vue({
            el: '#app-6',
            data: {
                message: 'Hello Vue!'
            }
        })
    })
</script>

2.v-once ： 一次加载后台数据改变页面显示内容也不再改变

<body>
    <div class="app">
        message: {{message}}
        <p v-once>This will never change: {{ msg }}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: ".app",
            data: {
                message: "hello vue",
                msg: "v-once 一次加载不再改变"
            }
        })
        console.log(app)
</script>

效果图如下：

3.v-html ：添加一个html标签片段

v-html="data 数据变量名"

4.v-bind:id="data参数名" ：添加id值

v-bind:disabled="data参数名" ：添加disabled属性

<body>
    <div class="app">
        message: {{message}}
        <p v-once>This will never change: {{ msg }}</p>
        <div v-html="rawHtml"></div>
        <div v-bind:id="dynamicId">v-bind:id 添加id值 </div>
        <button v-bind:disabled="someDynamicCondition1">Button: v-bind:disabled="false"</button>
        <button v-bind:disabled="someDynamicCondition2">Button: v-bind:disabled="true"</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: ".app",
            data: {
                message: "hello vue",
                msg: "v-once 一次加载不再改变",
                rawHtml: "<span>添加html标签片段</span>",
                dynamicId: "d1",
                someDynamicCondition1: false,
                someDynamicCondition2: true
            }
        })
        console.log(app.$data)
</script>

效果图如下：

5.使用javascrpt 表达式

表达式限制：每个绑定都只能包含单个表达式

<div class="app">
    <p>number初始值为1： {{number+1}}</p>
    <p>ok状态：{{ ok ? 'YES' : 'NO' }}</p>
    <p>message字符处理,初始值abcd：{{ message.split('').reverse().join('-') }}</p>
    <div v-bind:id="'list-' + id">v-bind:id="'list-' + id"</div>
</div>
<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: ".app",
        data: {
            number: 1,
            ok: true,
            message: "abcd",
            id: "d1",
            someDynamicCondition1: false,
            someDynamicCondition2: true
        }
    })
    console.log(app.$data)
</script>

效果图如下：

注意： javascript 可以直接使用 Data,Math

<div class="app">
    <p>number初始值为1： {{number+1}}</p>
    <p>ok状态：{{ ok ? 'YES' : 'NO' }}</p>
    <p>message字符处理,初始值abcd：{{ message.split('').reverse().join('-') }}</p>
    <div v-bind:id="'list-' + id">v-bind:id="'list-' + id"</div>
    <p>{{Math.PI}}</p>
    <p>{{new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()}}</p>
    <p>{{time}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
    var time = new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds();
    var app = new Vue({
        el: ".app",
        data: {
            number: 1,
            ok: true,
            message: "abcd",
            id: "d1",
            time: time,
            someDynamicCondition1: false,
            someDynamicCondition2: true
        }
    });
    console.log(app.$data,Math.PI, time)
</script>

6.v-bind:href="url" 链接

<a v-bind:href="url" v-bind:target="target">国融证券官网</a>

url: "http://www.grzq.com/osoa/views/index.html",
target: "_blank"

注意： v-bind:href="url"

这里的url 不能直接写成跳转地址，不然会报错。

7.v-on:submit.prevent="函数名"

<form v-on:submit.prevent="onSubmit">
    <button type="submit">提交</button>
    <span>{{iptstate}}</span>
</form>

var app = new Vue({
    el: ".app",
    data: {
        number: 1,
        ok: true,
        message: "abcd",
        id: "d1",
        time: time,
        url: "http://www.grzq.com/osoa/views/index.html",
        target: "_blank",
        iptstate: "",
        onSubmit: function(e){
            console.log("onSubmit表单提交");
            this.iptstate = "onSubmit表单提交";
        }
    }
});

效果图如下：点击提交按钮触发函数

8.filter 过滤器

capitalize 已经被移除，需要的话得自己封装方法

七.自定义组件（标签）： todo-item

<body>
    <div id="app-7">
        <ol>
            <!-- Now we provide each todo-item with the todo object   -->
            <!-- it's representing, so that its content can be dynamic -->
            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
        </ol>
    </div>
    <script src="../js/vue.js"></script>
    <script>
            Vue.component('todo-item', {
                props: ['todo'],
                template: '<li>{{ todo.text }}</li>'
            })
            var app7 = new Vue({
                el: '#app-7',
                data: {
                    groceryList: [
                        { text: 'Vegetables' },
                        { text: 'Cheese' },
                        { text: 'Whatever else humans are supposed to eat' }
                    ]
                }
            })
    </script>
</body>

八.

<script>
    var data = { a: 1 }
    var vm = new Vue({
        data: data
    })
    vm.a === data.a // -> true
    // 设置 属性 也会影响到 原始数据
    vm.a = 2
    data.a
    console.log(vm.a,data.a) // 2 2
    // 设置 原始数据 也会影响到 属性
    data.a = 3
    vm.a
    console.log(vm.a,data.a) // 3 3
</script>

注意：只有这些被代理的属性是响应的。

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

created 这个钩子在实例被创建之后被调用

var vm = new Vue({
    data: {
        aa: 1
    },
    created: function () {
        // `this` 指向 vm 实例
       console.log('aa is: ' + this.aa);   // aa is: 1
    }
})

九.

1.判断添加 class: active

isActive : true 添加active

false 不添加active

<body>
    <div class="test">
        <div v-bind:class="{ active: isActive1 }">div1</div>
        <div v-bind:class="{ active: isActive2 }">div2</div>
    </div>
    <script type="text/javascript">
        var myVue = new Vue({
            el: ".test",
            data: {
                isActive1: true,
                isActive2: false,
                rawId: "ID1",
                formatId: "id2"
            }
        })
    </script>
</body>

2.添加多个class (只要为true,就会添加)

3.class 绑定在一个对象里

var myVue = new Vue({
    el: ".test",
    data: {
        isActive1: true,
        isActive2: false,
        hasError: true,
        rawId: "ID1",
        formatId: "id2",
        classObject: {
            active: true,
            'text-danger': true
        }
    }
})

4.class 包含在数组里

var myVue = new Vue({
        el: ".test",
        data: {
            isActive1: true,
            isActive2: false,
            hasError: true,
            rawId: "ID1",
            formatId: "id2",
            classObject: {
                active: true,
                'text-danger': true
            },
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    })
</script>

5.class 三元表示

var myVue = new Vue({
    el: ".test",
    data: {
        activeClass: 'active',
        errorClass: 'text-danger'
    }
})

6.添加绑定 style 样式

<div class="test">
    <div v-bind:style="styleObject">添加style样式对象</div>
</div>
<script type="text/javascript">
    var myVue = new Vue({
        el: ".test",
        data: {
            styleObject: {
                color: "#fff",
                backgroundColor: "blue"
            }
        }
    })
</script>

7.多个style样式

<div v-bind:style="[baseStyles, otherStyles]">基本样式 + 其他样式</div>

var myVue = new Vue({
    el: ".test",
    data: {
        styleObject: {
            color: "#fff",
            backgroundColor: "blue"
        },
        baseStyles: {
            color: "#fff",
            backgroundColor: "blue"
        },
        otherStyles: {
            border: "2px solid red",
            margin: "10px"
        }
    }
})

8.css3 过渡效果

<!DOCTYPE HTML>
<html>
<head>
    <title>vue简单例子</title>
    <meta charset="UTF-8"/>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }
        .fade-enter, .fade-leave-active {
            opacity: 0
        }
    </style>
</head>
<body>
<div id="app">
    <button v-on:click="show = !show">
        Toggle
    </button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
</body>
</html>

十.

1.简单的条件渲染

<div class="test">
    <h1 v-if="ok">Yes</h1>
    <h1 v-if="no">no</h1>
    <h1 v-else>其他</h1>
</div>
<script type="text/javascript">
    var myVue = new Vue({
        el: ".test",
        data: {
            ok: true,
            no: false
        }
    })
</script>

2.条件组

v-if v-else-if v-else

2.js数组过滤

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
    items: [
        {message: 'Foo' },
        {message: 'Bar' }
    ],
    msg: [
        {message: 'Foo' },
        {message: 'Bar' }
    ],
    arr: [1,2,3,46,6],
    object: {
        FirstName: 'John',
        LastName: 'Doe',
        Age: 30
    },
    numbers: [ 1, 2, 3, 4, 5, 6 ]
},
computed: {
    evenNumbers: function () {
        return this.numbers.filter(function (number) {
            return number % 2 === 0
        })
    }
}

十一.

1.复选框：根据选择实时显示选中内容，

选中就在数组中添加内容，取消选中就在数组中删除数据

<div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>


<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            checkedNames: []
        }
    })

</script>

注意：单选框，下拉框同样如此。

单选框：

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

下拉框：

<select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

默认选中的下拉框：

<select v-model="selected2">
    <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
    </option>
</select>
<span>Selected: {{ selected2 }}</span>

data: {
    checkedNames: [],
    picked: [],
    selected: [],
    selected2: 'A',
    options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
    ]
}

0 0