vue基礎

引入vue

<script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>

一個基本的vue程式

<div id="app">    {{ message }}</div><script>var app = new Vue({    el: '#app',    data: {        message: 'zhangfann!'    }});</script>

模板語法

{{ messges}}

模板語法, 支援豐富的表示式

{{ msg +1 }}{{ ok? 'Yes' : 'No' }}{{ msg.split('').reverse.join('') }}

使用v-once, 則模板中引數不會被之後的變動改變

<p v-once>{{ msg }}</p>

v-html, 將資料以html方式解析:

var rawHtml="<span style="color:red">this should be red</span>"<p> 解釋為普通字元 {{ rawHtml}}</p><p>解釋為html程式碼 <span v-html="rawHtml"></span></p>

computed屬性

computed計算屬性, 和data一樣, 不過computed是一個函式, 需要先計算再賦值

主要目的是為了解決依賴, 計算屬性依賴於其他屬性, 當其他屬性更新時, vue會自動更新計算屬性

其次目的是為了避免在模板中進行過於複雜的計算

<div id='app1'>    <p>{{ msg }}</p>    <p>{{ reversedMsg}}</p></div>vm = new Vue({    el: '#app1',    data:{ msg: 'hello'},    computed : {reversedMsg: function(){        return this.msg.reverse()     }}})

計算屬性是個函式, 通常只能獲取, 但是也可以通過設定set, 來進行設定,

computed: {    reversedMsg: {        get: function...        set: function...    }}

v-bind

 v-bind:title='message',

向控制元件屬性傳遞資料

控制元件屬性也可以通過"[]"動態得出

v-bind:[someVar]='msg'

someVar就是Vue controller中的data的屬性值,

根據someVar的具體值, 來確定給控制元件哪個屬性賦值

v-bind縮寫

<div id="app1">    <p>{{message}}</p>    <button v-on:click='my_reverse'>click me!</button></div>var app1 = new Vue({    el: '#app1',    data: {message:'some message'},    method: {        my_reverse: function (){this.message=this.message.reverse()}    }})

v-on縮寫,

<a v-on:click='msg'></a>等同於<a @click='msg'></a>

v-on函式帶引數

<button @click='say('hi')'></button>

v-if

v-if='seen',

通過seen這個變數, 控制控制元件是否出現

v-else

<p v-if='condition'> test-if </p><p v-else> test-else </p>

v-else-if

<p v-if='condition1'> test-if </p><p v-else-if='conditon2'> test-else-if </p><p v-else-if='conditon3'> test-else-if </p><p v-else> test-else </p>

顯示/隱藏多個控制元件

<template v-if='condition'>    <p>1</p>    <p>2</p>    <p>3</p></template>

v-for

<ul id='app1'>    <li v-for='todo in todos' key='todo.id'>        {{ todo.text }}    </li></ul>

v-for可以重複出現控制元件,

需要為v-for提供key關鍵字, 方面vue追蹤更新控制元件

v-model

v-model是實現表單輸入和變數的繫結, 使用起來很簡單,

<div id='app1'>    <p>{{message}}</p>    <input v-model='message'></div>var app1 = new Vue({    el: '#app1',    data: {        message:'hello'    }})

多行文字, input是單行的,

<textarea v-model='message'></textarea>

Vue.component

Vue.component, 能建立新的控制元件,

Vue.component('todo-item', {    props: ['todo'],    template: '<li>{{todo.text}}</li>'})view:<div id="app7">    <ol>        <todo-item            v-for="todo in todos"            v-bind:todo='todo'            v-bind:key='todo.id'>        </todo-item>    </ol></div>controller:var app7 = new Vue({    el: '#app7',    data : {        todos: [        {id: 0, text: 'ni'},        {id:1, text: 'shi'},        {id:2, text: 'haoren'}        ]    }});

template的引數data與controller的引數一樣,

但是它的data引數必須是要給函式

data: function(){    return count:0}

props, template的內部值,

宣告:Vue.component('test-comp',{    props: ['title'],    template: "<p>title</p>"})賦值:<test-comp title='hello'></test-comp><test-comp v-bind:title='post.title' v-bind:key='post.id'></test-comp>

區域性註冊template,

var ComponentA = {};new vm = Vue({    components: {        'component-a' : ComponentA    }})

生命週期

vm = new Vue({    data: {msg:'hello'},    created : function(){        console.log('hello')    }})