vue如何引用和使用，實例和掛在點的介紹
<!DOCTYPE html> <html> <head> <title>vue 入門</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="root"> // <h1>hellow {{msg}}</h1> //方式一的模板 </div> //掛載點 <script> new Vue({ //一個vue實例 el: "#root" , //綁定掛載點 template: '<h1>hellow {{msg}}</h1>' //方式二的模板 data: { msg: "hellow word" } }) </script> </body> </html>
掛載點，模板和實例
Vue實例中的數據，事件和方法
插值表達式與v-text和v-html
//插值表達式 {{mgs}} //標籤綁定內容 v-text和v-html <body> <div id="root"> {{msg}} <h1 v-text="number"></h1> <h1 v-html="number"></h1> </div> <script> new Vue({ el: "#root" ,//和哪一個dom節點綁定 data: { msg: "hellow word", number: '<span>123</span>' } }) </script> </body> //v-text 輸出 <span>123</span> 會轉義 //v-html 輸出 123 不會轉義事件函數v-on ，注意v-on: = @
<h1 v-text="number" @click="handleClick"></h1> <h1 v-html="number" v-on:click="()=>{alert(123)}"></h1> methods:{ // handleClick: function(){ // alert(321); // } handleClick: function(){ this.msg = "world"; } }
Vue 中的屬性綁定和雙向數據綁定
屬性綁定v-bind，注意v-bind: = :
<div id="root" v-bind:title="title"> {{content}} </div>雙向數據綁定，v-model
<div id="root" v-bind:title="title"> <input v-model="content"> <div>{{content}}</div> </div>
Vue中的計算屬性和偵聽器
計算屬性，作用是將以前計算過的相同值做緩存，可以提高效率
偵聽器，監測某一個數據或計算屬性發生變化
<!DOCTYPE html> <html> <head> <title>vue 入門</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="root"> 姓<input v-model="firstName"/> 名<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el: "#root" ,//和哪一個dom節點綁定 data: { firstName: '', lastName: '', count: 0 }, computed: {//計算屬性 fullName: function(){ return this.firstName + this.lastName; } }, watch: { //偵聽器 // firstName: function(){ // return this.count++; // }, // lastName: function(){ // return this.count++; // } fullName: function(){ this.count++; } } }) </script> </body> </html>
v-if，v-show，v-for指令
v-if和v-show的區別，v-if會將元素從dom節點刪除，但v-show不會
v-for中v-bind:key
<div id="root"> <div v-show="isShow">hello word</div> <button @click="isShow1">toggle</button> <ul> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el: "#root" ,//和哪一個dom節點綁定 data: { isShow: true, list: [1,1,3] }, methods: { isShow1: function(){ this.isShow = !this.isShow; } } }) </script>