Vue.js核心概念与实战-优快云博客

引入方式

你也可以创建一个 .html 文件，然后通过如下方式引入 Vue

第一章 Hello Vue

</div>

　　var app = new Vue({

　　　　el: '#app',

　　　　data: {

　　　　　　message: 'Hello Vue!'

　　　　}

　　});

</script>

第二章 v-bind指令

文本

　　{{message}} 插入文本

　　<span v-once>这个将不会改变: {{ msg }}</span> 一次性插值，之后不更新

　　<p>Using v-html directive: <span v-html="rawHtml"></span></p> 输入html文本

特性

　　<span v-bind:title='message'> 123</span> 绑定title属性

　　<span :title='message'> 123</span> // 缩写

　　<div v-bind:id="dynamicId"></div> 绑定id属性

　　<button v-bind:disabled="isButtonDisabled">Button</button> 绑定disabled

　　{{ok ? 'YES' : 'NO'}} 可以使用表达式，不可使用语句，流控制

条件

　　<p v-if="seen">现在你看到我了</p> v-if 控制显示

　　<div v-else> Now you don't </div> v-else在v-if或v-else-if之后

　　<h1 v-show="ok">Hello!</h1> 不同的是始终存在DOM元素中，只是切换disabled

循环(优先级高于v-if)

　　<ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> v-for 循环渲染数组(item, index) in items / 对象(value, name) in object

事件

　　<button v-on:click="reverseMessage">逆转消息</button> v-on 绑定事件

　　methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } }

　　<a @click="doSomething">...</a> // 缩写

表单

　　<input v-model="message"> v-model 表单输入和应用状态之间的相互绑定

Class和Style绑定

　　<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> // 当isActive为true时，class有两个：static和active

　　<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> // 绑定样式

　　data: { activeColor: 'red', fontSize: 30 }

组件模板 Props使用

<ol>

　　<todo-item

　　　　v-for='item in groceryList'

　　　　v-bind:todo='item'

　　　　v-bind:key='item.id'

　　></todo-item>

</ol>

JS代码

Vue.component('todo-item', {

　　props: ['todo'],

　　template: '<li>{{todo.text}}</li>'

})

var app7= new Vue({

　　el: '#app-7',

　　data: {

　　　　groceryList: [

　　　　　　{ id: 0, text: '蔬菜' },

　　　　　　{ id: 1, text: '奶酪' },

　　　　　　{ id: 2, text: '随便其它什么人吃的东西' }

　　　　]

　　}

})

插槽使用

<head-top signin-up='home'>

　　<span slot='logo' class="head_logo" @click="reload">ele.me</span>

</head-top>

<template> // 由子元素替换插槽

　　<slot name='logo'></slot>

</template>

状态属性 Data

vue虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例

var vm = new Vue({ // 选项 })

Vue的data属性

var data = { a: 1 }

var vm = new Vue({ data: data })

此时data.a和vm.a被动加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

var data = { a: 1 }

var vm = new Vue({ el: '#example', data: data })

vm.$data === data // => true

vm.$el === document.getElementById('example') // => true

方法 methods

　　getData() {

                return [{

                    value: 11, text: '重量比对协同'

                }, {

                    value: 12, text: '资质对比协同'

                }, {

                    value: 13, text: '轨迹协同'

                }]

            },

过滤器 filters

一般做只处理HTML页面的数据的事，更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。

用法一 在双花括号中
{{ message | formatterEnumType}}

用法二 在 `v-bind` 中
<div v-bind:id="rawId | formatId"></div>

filters:{

        // 过滤工单类型

        formatterEnumType(value){

            let label = '';

            that.ticket.templateTypeList.forEach(item => {

                if(item.value==value){

                    label = item.label

                }

            })

            return label;

        },

}