vue技巧

方法綁定  {{ name() }} 返回 展示：

<template>
    <div>{{name()}}</div>
</template>

<script>
  export default {
    data{
        return {
            text："是？"
        }
    }
    methods: {
        name(){
          return "名字"+ this.text
        },
    }
    
  }
</script>

頁面跳轉URL綁定 點擊都可以打開新頁面：

<template>
    <a :href="weburl">a標籤跳轉</a>
    <p v-html="url"></p>
</template>
<script>
  export default {
    data{
        return {
            weburl:'http://www.baidu.com',
            url:"<a href='http://www.baidu.com'>點我跳轉</a>",
        }
    }
  }
</script>

    age:30,//data>return中
	@click="age++"  //單機加1
	@dblclick="age--"  //雙擊-1

//傳參加等
	@click='add(1)'
	add(inc){
		this.age+=inc //31
	}
//傳參減等
	@click='subtract(1)'
	subtract(inc){
		this.age-=inc  //29
	}

//獲取鼠標相對容器位置
  x:0,
  y:0//data>return中
	<div v-on:mouseover='updateXY'>{{X}},{{y}}</div>
	updateXY(event){
		this.x=event.offsetX
		this.y=event.offsetY
	}

//修飾符
	@click.once="add"  //只能點擊一次
	@click.stop="add"  //阻止冒泡
	@click.prevent="add"  //阻止默認事件

	@keyup.enter="add"   //只能鍵盤Enter鍵觸發
	@keyup.alt.enter="add"   //只能鍵盤alt鍵和Enter鍵同時按下觸發

//計算屬性computed與方法methods
	methods:{
		addToA(){console.log("A")}
		addTob(){console.log("B")
	}
  	//methods中的方法觸發一個裏面的方法全部觸發都會執行一遍，也就是觸發addToA()打印出 A B 兩個
	computed:{
		addToA(){console.log("A")}
		addTob(){console.log("B")
	}
  	//computed更加的優化，當前變化幅度比較大，耗時，大量的搜索纔會用到，也就是觸發addToA()打印出 A 一個

  	//計算屬性在html中書寫區別 極速屬性:<div>{{addToA}}</div> 方法:<div>{{addToA()}}</div>
  	//vue中操作的是虛擬的DOM computed會與真實DOM對比，而methods中不會做對比直接執行

//動態綁定CSS
	changeColor:false,changeLength:false//data>return中
	changeColor{color:red},changeLength:after{content:"length"}//style中
  --1.
	<h2 :class="{red:true,blue:false}">CSS</h2> //當red爲true時添加類名red,可添加多個類名，隔開
  --2.
	<div @click="changeColor =! changeColor" :class="{changeColor:changeColor}">動態CSS</div>//點擊切換顏色
  --3.
	<button @click="changeColor =! changeColor"></button>//點擊切換顏色
	<button @click="changeLength =! changeLength"></button>//點擊切換添加文字length
	<div :class="compClasses">動態CSS</div>
	computed:{
		compClasses(){
			return{
				changeColor:this.changeColor,
				changeLength:this.changeLength,
			}
		}
	}

//v-if
	error:false,
	success:false//data>return中
	<button @click="error =! error"></button>
	<button @click="success =! success"></button>
	<p v-if="error"></p>
	<p v-else-if="success"></p>
	//會先判斷error,當爲false時會繼續判斷success 兩者只能一個爲true
	//v-if與v-show 區別v-if會直接判斷在DOM結構中存不存在，v-show在DOM中存在只是判斷加了個disple:none 


//v-for
  --1.<template v-for="(user,index) in users"></template> //使用template渲染時不會創建空的容器
  --2.<template v-for="(user,index) in users">
		<div v-for="(val,key) in user">{{key}} - {{val}}</div>
	</template>//雙循環遍歷數組裏對象的key,val
	//在html展示數組中所有對象，中的所有key值及val值

? Project name my-project                 //--項目名字
? Project description A Vue.js project    //--項目描述
? Author lipj <********@163.com>          //--項目作者
? Vue build standalone                    //--是否安裝build
? Install vue-router? Yes                 //--是否安裝vue-router
? Use ESLint to lint your code? (Y/n)     //--代碼嚴格測試

//全局註冊組件--main.js中

    import Users from './components/Users'  //components文件夾下創建組件後引入
    Vue.component('users',Users);           //全局註冊組件

    //這樣就可以在任意頁面中通過 <users></users> 標籤引入組件

//局部註冊組件
    <template>
        <div>
            <users></users>     //頁面中通過components中的名字調用該組件
        </div>
    </template>
    <script>
        import Users from './components/Users'  //components文件夾下創建組件後引入
        export default{
            components:{
                USers            //只在該頁面中註冊組件
            }    
        }
    </script>