Vue基础1

1. 解析html代码：

     <p v-html="msg"></p>
   

   data(){
         return {
           msg:"<a href='http://baidu.com'>百度</a>  "
         }
       }
   

2. Attribute 绑定：
   双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用v-bind:对应的语法糖：:
   例如：

   标准形式
   <div v-bind:id="dynamicId"></div>
   语法糖形式：
   <div :id="dynamicId"></div>
   ---------------------------------------
   <div  :class="dynamicClass"></div>	
   

多条绑定：

	<template>
	   <div v-bind="multi">123123</div>
	</template> 
	<script>
	export default{
	    name:"demo",
	    data(){
	        return{
	            msg:"11111111",
	            multi:{
	                id:"123",
	                class:"red"
	            }
	        }
	    }
	}
	</script>

3. 条件渲染:

v-if  ->为真的时候才渲染
v-else
v-else-if
v-show ->都渲染，但是只在为真的时候展示

4. 列表渲染：v-for

<div v-for="(item,index) in num">{{item}}</div>
data(){
        return{
            num:["1","2","3"]
        }
    }
or 
<div v-for="(item,index) of num">{{item}}</div>
data(){
        return{
            num:["1","2","3"]
        }
    }

除了遍历数组，还可以遍历对象（value，key，index）
5. 通过key管理状态:

 <div v-for="(item,index) in num" :key="index">{{item}},{{index}}</div>

节省内存消耗，一般用唯一标识来替代key
6. 事件处理：v-on或者@

<button @click="func">Add</button>
or <button v-on:click="func">Add<button>
<p>{{count}}</p>

export default{
    name:"demo",
    data(){
        return{
            count:0
        }
    },
    methods:{
        func(){
            this.count+=1
        }
    }
}

7.传递参数：

<button @click="func('hello')">Add</button>

对应js:

 methods:{
        func(msg){
            console.log(msg)
            this.count+=1
        }
    }

8. 事件修饰符：

.stop ->阻止
.prevent  ->阻止默认事件
.once  ->只触发一次
.enter -> 

9. 数组变化检测：
   Vue能够监听响应式数组的变更方法，并且在它们被调用是触发相关的更新，这个小变更方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse() 

10. 计算属性:

  computed:{
     //逻辑处理 ，会基于响应式依赖被缓存
    },

11. 样式Class绑定：
    对象形式：

 <p :class="{'active':isActive,'text-danger':td}">样式绑定</p>

或者：

 <p :class="object">样式绑定</p>

object:{
        'active':true,
        'text-danger':true
    }

数组形式：

 <p :class="[arrActive,arrDanger]">样式绑定2</p>

 arrActive:'active',
 arrDanger:'text-danger'

数组和对象嵌套过程中，只能是数组嵌套对象。
12.Style绑定：

<p :style ="{color:accolor}">Style绑定 </p>

export default{
    
    data(){
        return{
            accolor:'green'
        }}}