vue数据绑定

1.数据绑定{{}}

        {{}}可以很方便的让我们将数据源对象的属性渲染到Vue的DOM元素中。

弊端：当网速慢，数据加载失败、JavaScript报错或者用户禁用页面所有JavaScript时，会在浏览器中直接渲染插值比如{{msg}},在这种情况之下，对用户的体验并不好。

        在Vue中，可以使用v-text起到同等的作用。要想输出字符串，必须添加单引号，否则会报错。

                <h1 v-text="‘信息’+msg"></h1>

        v-text=""指令中的双引号并不是代表字符串，而是Vue自定义的划定界限的符号,如果我们里面输出字符串，就需要在里面再添加一对单引号,{{}}代表的就是""，所以在v-text=""中，我们在内容里面就不需要再写{{}}了，直接写数据属性就行了。

<h1 v-text="msg"></h1>

<h2>{{msg}}</h2>        
<!-- 绑定数据的另一种方法 -->
 <div v-text="msg"></div>

  export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
               }
             }
          }

2.属性绑定v-bind:属性名=“vue对象的data数值名称”

 <img v-bind:src="url"/>

 export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
          url:'https://XX.com/logo.gif'
               }
             }
          }

简写方式：省略v-bind保留冒号（：）

<img :src="url"/>

3.绑定HTML  v-html=（会将html标签进行解析）

<div v-html="h"></div>

 export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
          h:'<h2>我是h2</h2>',
               }
             }
          }

4.绑定v-bind:class

对象语法:格式为:class="{样式:true/false}"，当为真时添加样式，当为假时移除样式。

 <!-- v-bind:class  :class的使用 -->
    <div v-bind:class="{'red':flag}">
      我是一个div
    </div>

    <div :class="{'red':flag,'blue':!flag}">
      我是另一个div
    </div>

export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
          flag:false,  list:['1111','2222','3333'],
               }
             }
          }

<style lang="scss">
  .red{ color: red；}
  .blue{ color:blue;}
</style>

数组语法:直接填入数组，数组项为vue对象的data数值，该值内容为某样式名称，默认为true。

 <div v-bind:class="[redclass,blueclass]">
      我是另一个div
  </div>
export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
          redclass:red,
          blueclass:blue
               }
             }
          }
<style lang="scss">
  .red{ color: red；}
  .blue{ color:blue;}
</style>

循环时绑定

        <li v-for="(item,key) in list"  :class="{'red':key==0,'blue':key==1}">
          {{key}}---{{item}}
        </li>

5.绑定v-bind:style

(1)内联语法

<p v-bind:style="{color:'red',fontWeight:'bold' }">内联语法</p>

(2)还可以通过把样式对象设为vue对象data中的一个数值，然后在元素表达式中调用

<!-- v-bind:style  :style的使用 -->
    <div class="box" v-bind:style="{'width':boxWdith+'px'}">
      我是另一个div
    </div>

export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',          
          boxWdith:500
               }
             }
          }

6.双向数据绑定必须在表单控件中使用

VUE是一个MVVM框架。视图影响模型，模型影响视图。 常用的表单控件有：文本输入框，单选框，多选框和下拉列框

<input type="text" v-model="message">
<label>Message is: {{ message }}</label>
 
<script>
	var vue = new Vue({
		el: "#app",
		data: {
			message: ""
		}，
                methods:{
                        getMsg(){
                            alert(this.message);//获取data中的数据
                        }
                }
	});
</script>

7.获取dom节点

        ref官方解释是：ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。想要在Vue中直接操作DOM元素，就必须使用ref属性进行注册。只在组件渲染完成后才被填充。

      <div ref="box">我是一个box</div>
      <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>

       getInputValue(){
              //获取ref定义的dom节点  
             // `this` 在方法里指向当前 Vue 实例

            console.log(this.$refs.userinfo);
            this.$refs.box.style.background='red'; 
            alert(this.$refs.userinfo.value);
          }