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);
          }









  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值