Vue笔记(1)

1.六大指令

1.2 内容渲染指令

<p v-text="content"></p>
<p v-html="htmlContent"></p>
<p>{
  { content }}</p>

<p>{
  { count +1 }}</p>
<p>{
  { showContent?content:"无法展示" }}</p>

注意: 因为 defineProperty 的原因，Vue无法监听到对象新增或删除属性，如果data中有对象属性,且这个属性需要动态添加或删除属性需要使用 Vue.set和Vue.delete 

1.3 属性绑定

<input type="text" v-bind:placeholder="tips" />
<input type="text" :placeholder="tips"/>

v-bind:placeholder 可以简写为 :placeholder

1.3.1 class和style的绑定

<!-- 当activeIndex为1时div才拥有 active-div 类 -->
<div :class="{'active-div':activeIndex==1}"></div>

<!-- 使用background-color写为backgroundColor 其他的样式也一样写法 -->
<div :style="{backgroundColor:dynamicStyle.bgcolor}"></div>

<div :class="[classname1,classname2]"></div>

data:{
    classname1: 'main'
    classname2: 'active-main'
}

1.4 事件绑定 

<!-- html代码 -->
<div id="app">
    当前值为: {
  {count}} 
    <input type="button" value="+1" v-on:click="add"/>
    <!-- 也可简写为 @click -->
    <input type="button" value="+1" @click="add"/>
</div>

// JS代码
const vm = new Vue({
    el: "#app",
    data(){
        return {
            count:0
        }
    },
    methods:{
        add(){
            this.count += 1;
        }
    }
});

1.4.1 $event

当需要给事件处理方法传递参数且依然想得到事件对象时可以使用$event

<input type="text" @focus="checkContent(12,$event)" v-model="conte