vue.js基础学习（模板语法）

基础入门：vue.js模板语法

1、模板语法

• methods：给vue定义方法；
• this.：指向当前vue实例；
• v-html：让内容以HTML形式编译；
• v-bind：绑定动态数据；
• v-noce：当数据发生改变时，插值处内容不发生改变；
• [ ]：动态属性绑定；

源代码：

<script >
  export default{ //导出对象
    data(){
      return{
        num:10,
        uname:'你好，世界！',
        home:1,
        msg:"<a src='www.baidu.com'>百度</a>",
        id:"d1",
        attri:"id",
        mouseEvent:'click'

      }
    },
    //methods给vue定义方法
    methods:{
      chengeuname:function(){
        //this指向当前vue实例
        this.uname='世界，你好！'
      },
      chengeup:function(){
        this.home=this.home+1
      },
      chengedown:function(){
        this.home=this.home-1
      },
      change:function(){
        this.id="d2"
      }
    }
  }
</script>

<template>
  <div>
    <p>{{num}}</p>
    <p>{{uname}}</p>
    <span>{{home}}</span>
    <!-- v-html:让内容以HTML的形式编译 -->
    <div v-html="msg"></div>
    <!-- v-once：当数据发生改变时，插值处内容不发生改变 -->
    <p v-once>{{uname}}</p> 
    <!-- v-bind:数据动态绑定 -->
    <p v-bind:id="id">你好，世界！</p>
    <!-- []:动态属性绑定 -->
    <p v-bind:[attri]="id">hello word</p>
    <!-- 动态事件 -->
     <button @click="chengeuname">更改</button>
     <button @click="chengeup">加大</button>
     <button @click="chengedown">减小</button>
     <button @click="change">改变颜色</button>
     <button @click="attri='class'">改变属性</button>
     <button @[mouseEvent]="attri='class'">动态事件绑定改变属性</button>
     <button @click="mouseEvent='mouseover'">改变事件</button>
  </div>
</template>

<style>
  #d1{
    color: rgb(8, 37, 254);
  }
  #d2{
    color: coral;
  }
  .d1{
    font-size: 50px;
  }
</style>

源代码运行情况：