vue對比jquery
vue：mvvm 數據驅動影響視圖 適用於復雜數據jquery：mvc 視圖塞入數據 適用於復雜視圖動效
（其實都是js 的封裝，以及對html 的擴展）
相關指令
v-text 等同大胡子效果 但是會轉換為字符串
v-html 綁定html屬性
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鳥教程</h1>' } }) </script>
v-if三兄弟 只會渲染判斷為真的domv-show 綁定值的布爾值來判斷是否顯示 會渲染整個dom只是會根據布爾只能判斷是否增加display none這個內聯樣式v-if和v-show的區別：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；v-if適合運營條件不大可能改變；v-show適合頻繁切換
v-for: 循環
v-once 只會渲染一次 即使數據改變
v-bind 用來響應地更新html屬性 使用場景：綁定接口請求得到的數據 簡寫： : ，可以綁定class和內聯樣式
<style> .class1 { background: #444; color: #eee; } </style> <body> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <div id="app"> <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1"> <br><br> <!-- 單引號只是對下面對兩個class1作出區分 不使用也可以 前面是class 樣式 后面是bool值 --> <div v-bind:class="{'class1': class1}"> directiva v-bind:class </div> </div> <script> new Vue({ el: '#app', data: { class1: false } }); </script> </body>
v-on：用來監聽dom事件 其修飾符可以指定鍵盤事件v-on:click 簡寫@click：事件監聽v-model:雙向綁定 一般結合input textarea (多行) 使用 其有修飾符.lazy .number .trim
生命周期
以下都是鈎子函數
beforeCreate（創建前）created（創建后）beforeMount (載入前)mounted（載入后）beforeUpdate（更新前）updated（更新后）beforeDestroy（銷毀前）destroyed（銷毀后）
（在不同的時間點，可以進行不同的操作。）
計算屬性
computed：計算屬性
區別與methods：
性能相比methods要高 因為有緩存 只有在相關值發生改變時才會觸發 在第一次渲染頁面也會主動觸發
計算屬性的數據源未發生變化 則不會觸發響應的計算屬性
屬性區分於方法
<div id="app"> <p>原始字符串: {{ message }}</p> <p>計算后反轉字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 以下的函數將提供給計算屬性的 getter 計算屬性默認只有getter reversedMessage: function() { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } } }) </script>
計算屬性中默認存在getter方法 我們可以手動添加setter方法:
<div id="app"> <p>{{ site }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { // getter get: function() { return this.name + ' ' + this.url }, // setter set: function(newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 調用 setter， vm.name 和 vm.url 也會被對應更新 vm.site = '菜鳥教程 http://www.runoob.com'; //觸發set方法 document.write('name: ' + vm.name); //動態更新dom樹 document.write('<br>'); document.write('url: ' + vm.url); </script>
過濾器
vue中可以自定義過濾器 被用作常見地文本格式化
<div id="app"> <!-- 過濾器的用法 --> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) //對字符串的第一個字母進行大寫 } } }) </script>
監聽屬性
watch：響應數據變化
<div id="computed_props"> <!-- 分別綁定kilometers和meters --> 千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters"> </div> <p id="info"></p> <script type="text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers: 0, meters: 0 }, methods: {}, computed: {}, watch: { kilometers: function(val) { //dom中的相關綁定會觸發對應的觀察屬性 this.kilometers = val; this.meters = val * 1000; }, meters: function(val) { this.kilometers = val / 1000; this.meters = val; } } }); // $watch 是一個實例方法 $作用與vue自帶的屬性區別u與自定義的屬性 vm.$watch('kilometers', function(newValue, oldValue) { // 這個回調將在 vm.kilometers 改變后調用 document.getElementById("info").innerHTML = "修改前值為: " + oldValue + "，修改后值為: " + newValue; }) </script>
樣式綁定
- 單樣式綁定：
<style> .active { width: 100px; height: 100px; background: green; } </style> <body> <div id="app"> <!-- 主要是v-bind的使用 --> <div v-bind:class="{ active: isActive }"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true } }) </script>
- 多樣式綁定：
<style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> <body> <div id="app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> </div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: false } }) </script>
組件
組件是整個vue知識體系中最重要的一個模塊
組件的作用是：復用
前端路由相對於傳統路由 請求少 節省資源
mode:history //不使用html5 實現前進和后退 默認設置
關於組件的引用 除了直接引用自定義標簽 is標簽也可以引用組件到指定的位置,動態綁定組件
全局組件
<div id="app"> <runoob></runoob> </div> <script> // 注冊 此中注冊方式為全局組件 所有的外部組件中都可以引用 Vue.component('runoob', { template: '<h1>自定義組件!</h1>' }) // 創建根實例 new Vue({ el: '#app' }) </script>
局部組件
區分於全局組件
<div id="app"> <runoob></runoob> </div> <script> var Child = { template: '<h1>自定義組件!</h1>' } // 創建根實例 new Vue({ el: '#app', components: { // <runoob> 將只在父模板可用 'runoob': Child } }) </script>
template
template 模版 用來承載dom樹 常在組件中使用
props
自定義組件屬性：通過props申明屬性 可以通過v-bind動態綁定自定義屬性
<div id="app"> <child message="hello!"></child> </div> <script> // 注冊 Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實例中像 “this.message” 這樣使用 template: '<span>{{ message }}</span>' //可以這樣理解：此處message既是屬性也是變量 }) // 創建根實例 new Vue({ el: '#app' }) </script>
動態props
通過v-bind實現
<div id="app"> <div> <input v-model="parentMsg"> <br> <!-- 通過v-bind綁定父組件中的parentMsg 實現動態綁定--> <child v-bind:message="parentMsg"></child> </div> </div> <script> // 注冊 Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實例中像 “this.message” 這樣使用 template: '<span>{{ message }}</span>' }) // 創建根實例 new Vue({ el: '#app', data: { parentMsg: '父組件內容' } }) </script>
組件間交互
父組件往子組件傳入數據使用props 反過來則用emit
父傳子：
子組件props定義屬性 子組件標簽引用v-bind將父組件參數與子組件屬性綁定
<div id="counter-event-example"> <button-todo v-bind:todo="item"></button-todo> </div> <script> Vue.component('button-todo', { props: ['todo'], template: '<button >{{ todo }}</button>' }) new Vue({ el: '#counter-event-example', data: { item: '我是item' } }) </script>
子傳父：
父組件定義method：fv_fuc 接受參數arg
子組件 this.$.emit(<fuc>,<arg>)
子組件標簽引用 v-on：<fuc>="fv_fuc"
流程： 子組件的emit觸發標簽引用的fuc繼而觸發父組件的fv_fuc
<div id="app"> <div id="counter-event-example"> <p>{{ counter }}</p> <button-counter v-on:increment="setCounter"></button-counter> </div> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function() { return { counter: 0 } }, methods: { incrementHandler: function() { this.counter += 1 this.$emit('increment', this.counter) } }, }) new Vue({ el: '#counter-event-example', data: { counter: 0 }, methods: { setCounter: function(somedata) { this.counter = somedata //接收子組件的數據 } } }) </script>
自定義指令
directive 定義指令名稱inserted 當綁定元素插入到dom中會觸發
<div id="app"> <p>頁面載入時，input 元素自動獲取焦點：</p> <input v-focus> </div> <script> // 注冊一個全局自定義指令 v-focus Vue.directive('focus', { // 當綁定元素插入到 DOM 中。 inserted: function(el) { // 聚焦元素 el.focus() } }) // 創建根實例 new Vue({ el: '#app' }) </script>
vue.directive定義全局指令 directives: {}的方式定義局部指令 這點和component(組件)相似
<div id="app"> <p>頁面載入時，input 元素自動獲取焦點：</p> <input v-focus> </div> <script> // 創建根實例 new Vue({ el: '#app', directives: { // 注冊一個局部的自定義指令 v-focus 和components的使用相似 focus: { // 指令的定義 inserted: function(el) { // 聚焦元素 el.focus() } } } }) </script>
directive可以和鈎子函數配合使用 不需要鈎子函數也可以簡寫 第二個參數是function，默認的第一個參數是el
<script> Vue.directive('runoob', { // 綁定bind的鈎子函數 bind: function(el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#app', data: { message: '菜鳥教程!' } }) </script>
路由
路由：
需要下載 vue_router庫 然后vue.use(VRouter)
使用步驟：
1.定義路由組件
2.定義路由:映射組件
3.通過routes配置新建router實例
4.通過router參數注入路由 並且掛載根實例
頁面跳轉 rooter-link
<!-- 導入路由用到的js --> <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 組件來導航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> <script> // 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter) // 1. 定義（路由）組件。 // 可以從其他文件 import 進來 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定義路由 // 每個路由應該映射一個組件。 其中"component" 可以是 // 通過 Vue.extend() 創建的組件構造器， // 或者，只是一個組件配置對象。 // 我們晚點再討論嵌套路由。 const routes = [{ path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 創建 router 實例，然后傳 `routes` 配置 // 你還可以傳別的配置參數, 不過先這么簡單着吧。 const router = new VueRouter({ routes // （縮寫）相當於 routes: routes }) // 4. 創建和掛載根實例。 // 記得要通過 router 配置參數注入路由， // 從而讓整個應用都有路由功能 const app = new Vue({ router }).$mount('#app') // 現在，應用已經啟動了！ </script>
路由參數
在映射表里設置 如：path：'/apple/:color'