Vue笔记(1)-数据绑定

1.数据绑定：

   1).普通文本  {{msg}}    

<span>Message: 可更改的{{ msg }}</span>

<span v-once>Message:不可更改{{ msg }}</span>

  2).HTML文本（ v-html指令）

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

//其他已略
data:{
     rawHtml:"<span style='color:red'>我是红色的字</span>"
}

解析结果<p><span style="color:red;">我是红色的字</span></p>

2.特性

     1.v-bind:绑定元素特性,可简化为：

           eg：v-bind:title="title";v-bind:url="url";（:title="title"  :url="url";）

//完整写法
<button v-bind:disabled="isButtonDisabled">Button</button>

//缩写
<button :disabled="isButtonDisabled">Button</button>

  如果isButtonDisabled的值是null，undefind或者false，则disable都不会被渲染

*支持js单个简单表达式

{{number+1}}
{{ok?"yes":no}}
{{msg.split(" ").reverse().join()}}
<div :id='"list"+id'></div>

 3.v-if：条件渲染 （可直接在控制台更改状态：vm.seen=false）

    一般应用

<div id="app">
  <p v-if="seen">seen为true时我显示</p>
  <p v-else>备胎啦</p>
</div>

//v-else-if
  <div v-if="type==='A' || type==='a'">A</div>
  <div v-else-if="type==='B'">B</div>
  <div v-else-if="type==='C'">C</div>
  <div v-else>Not A/B/C</div>

var vm=new Vue({
    el:"#app",
    data:{
        seen:ture
    }
});

   v-else元素必须跟着v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

    在<template>元素上使用v-if条件渲染分组     

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

      整个template是否显示

     用key管理可复用的元素         

//没有使用key之前
<template v-if="loginType==='username'">
    <label>用户名</label>
    <input placeholder="请输入用户名"/>
</template>
<template v-if="loginType==='emall'">
    <label>电子邮箱</label>
    <input placeholder="请输入电子邮箱"/>
</template>

    Vue为了能高效的渲染元素，通常会复用已有的元素，并不会从头开始渲染，所以没有使用key管理之前，

在切换用户名和邮箱登录方式过程中，只有label的文字被替换，input里面的placeholder被替换，而你在input输入的值是不会改变的

  Vue提供了一种方式用来表达“这两个元素是独立的，不要复用他们”，添加一个具有唯一值的key属性即可

<template v-if="loginType === 'username'">
  <label>用户名</label>
  <input placeholder="请输入用户名" key="username-input">
</template>
<template v-else>
  <label>电子邮箱</label>
  <input placeholder="请输入电子邮箱" key="email-input">
</template>

  此时切换，输入框都会重新被渲染，<label>没有key值，还是会被复用

3.v-show（根据条件是否显示元素）

    带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

<h1 v-show="ok">Hello!</h1>

v-show 不支持 <template> 元素，也不支持 v-else

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~明明白白分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

class与style的绑定

    绑定class(以下所有方式解析结果都为<div class="active"></div>)

• 单个class

<div class="default" v-bind:class="active"></div>

//js
data:{
    active:true
}

•   class对象(定义在内联模板里)

//html
<div v-bind:class={active:isActive,"text-danger":hasError}></div>

//js
 data{
    isActive:true,
    hasError:false
}

•   class对象(不定义在内联模板里)

//html
<div v-bind:class="classObj"></div>

//js

data:{
    classObj:{
        active:true,
        "text-danger":false
    }
}

•     返回class对象的计算属性

//html
<div v-bind:class="classObj"></div>

//js

data:{
    isActive:true,
    error:null
},
computed:{
    classObj:function(){
    return{
        active:this.isActive && !this.error,
        "text-danger":this.error && this.error.type==="fatal"
        }
    }
}

•   数组语法

//html

<div v-bind:class="[activeClass,errorClass]"></div>

//数组中使用三元表达式
<div v-bind:class="[isActive ? activeClass :'' ,errorClass]"></div>

//数组中使用对象
<div v-bind:class="[{active：isActive },errorClass]"></div>

//js

data:{
    activeClass:active,
    errorClass:"text-danger",
    isActive:true
}

渲染结果为<div class="active text-danger"></div>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~明明白白分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

绑定style

• 对象语法       

//1.单个样式输入
<div v-bind:style={color:activeColor,'font-size':fontSize + 'px'}></div>

data:{
    activeColor:"#fc0",
    fontSize:18
}


//2.所有样式绑定一个样式对象
<div v-bind:style="styleObj"></div>

data:{
    styleObj{
        color:"#fc0",
        fontSize:"18px"
    }
    
}


//3.返回对象的计算属性
<div v-bind:style="styleObj"></div>

data：{ },
computed:{
    styleObj:function(){
        return{
               color:"blue",
			   fontSize:"18px",
			   background:"orange" 
            }
    }
}

• 数组语法

<div :style="[baseStyle,overridingStyles]"></div>

data{
    baseStyle:color:orange,
    overridingStyles:font-size:18px;
}

• 自动添加前缀
• 多重值

<div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。