05~vue的模版语法

vue的模版语法

文本插值

双大括号

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<span>Message: {{ msg }}</span>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

v-once指令一次性插值

通过使用 v-once , 可以执行一次性插值, 当数据发生改变时, 插值处的内容不会更新; 但需要留心这会影响到该节点上的其他数据绑定:

<span v-once>Message: {{ msg }}</span>

v-html让内容以html的形式显示

在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。

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

demo

<script>
// 声明式渲染, 可以提高开发效率
export default {
  // 导出对象,这里面导出了, 暴露给模板，模版里面就可以使用导出的对象
  data () { // 给vue定义数据
    return {
      num: 0,
      username: '张三',
      msg: "<h2>我是二级标题</h2>",
    }
  },
  methods: { // 给vue实例定义方法
    changeUsername: function () {
      // this就是指向的当前的vue实例
      this.username = '老王'
    }
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
    <p>{{num}}</p>
    <p>{{username}}</p>
    <!-- v-once:  当我们数据发生改变时, 插值处的内容不会更新 -->
    <p v-once>{{username}}</p>
    <button @click="changeUsername">改变名字</button>
    <!-- msg中有标签, 如果直接双大括号解析, 页面会输出一个字符串的 -->
    <p>{{msg}}</p>
    <!-- 使用v-html指令, 输出真正的HTML,两个标签中间的双大括号语法就不需要有了 -->
    <p v-html="msg"></p>
  </div>
</template>

<style>
</style>

效果:

Attribute(属性)绑定

v-bind 语法糖为 :

v-on语法糖为 @

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：
v-bind 可以简写 : , 这是它的一个语法糖, 它可以动态绑定属性内容, 比如, class属性, src属性, id属性等等属性

<script>
// import func from 'vue-editor-bridge'
export default {
  data () { // 给vue定义数据
    return {
      username: "username",
      imgUrl: "1.png"
    }
  },
  methods: { // 给vue实例定义方法
    changeColor: function () {
      this.username = 'username1'
    }
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
    <!-- v-bind 绑定属性的内容 -->
    <!-- 绑定用户名的id属性值为vue定义的username -->
    <p v-bind:id="username">用户名</p>

    <button @click=changeColor>点我改变用户名颜色</button>
    <hr />
    <hr />
    <hr />
    <hr />
    <!-- 
      v-bind可以简写为 : 
      动态绑定值, 一般可以绑定图片地址, 属性值      
       -->
    <p><img :src="imgUrl"
           style="width:200px"
           alt=""></p>
  </div>
</template>

<style>
#username {
  color: red;
}
#username1 {
  color: rgb(53, 4, 228);
}
</style>

效果

使用 JavaScript 表达式

因为模板中已经和vue进行了双向数据绑定, vue中的属性, 直接可以在模版中使用, 比较简单的事件, 就可以直接使用JavaScript 表达式 就不用单独去写一个方法了

<script>
// import func from 'vue-editor-bridge'
export default {
  data () { // 给vue定义数据
    return {
      username: "username",
      name: '张三丰',
      count: 100
    }
  },
  methods: { // 给vue实例定义方法
    changeColor: function () {
      this.username = 'username1'
    }
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
    <!-- v-bind 绑定属性的内容 -->
    <!-- 绑定用户名的id属性值为vue定义的username -->
    <!-- : 就是v-bind的语法糖 -->
    <p v-bind:id="username">用户名</p>
    <!-- 使用JavaScript 表达式直接修改用户名的id属性为username1 -->
    <button @click="username='username1'">点我改变用户名颜色</button>
    <!-- 使用JavaScript 表达式,显示count+10的结果-->
    <p>{{count+10}}</p>
    <!-- 使用JavaScript 表达式, 反转张三丰为丰三张 -->
    <p>{{name.split('').reverse().join('')}}</p>
    <p :id="username + 10">测试属性js表示</p>
    <!-- v-on 用于监听ODM事件 -->
    <button v-on:click='changeColor'>点我v-on</button>
    <button @click='changeColor'>点我v-on</button>
    <!-- @符号就是v-on的语法糖 -->
  </div>
</template>

<style>
#username {
  color: red;
}
#username1 {
  color: rgb(53, 4, 228);
}
</style>

动态属性

动态绑定属性

:[attributeName]="username"> 动态属性名为: attributeName, 属性值为username

动态绑定事件

<button @[mouseEvent]="attributeName='class'">动态事件</button> 动态事件名为mouseEvent

<script>
// import func from 'vue-editor-bridge'
export default {
  data () { // 给vue定义数据
    return {
      username: "username",
      name: '张三丰',
      attributeName:'id',//定义一个动态属性名
      mouseEvent:'click' //定义一个动态事件
    }
  },
  methods: { // 给vue实例定义方法
    changeColor: function () {
      this.username = 'username1'
    }
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
   <!-- 动态属性 -->
   <!-- 动态属性 -->
   <!-- 动态绑定属性名 attributeName, 它的值为 username -->
   <p :[attributeName]="username">{{name}}</p>
   <!-- 把属性名改成class,上面那个就变成了 class = username -->
   <button @click="attributeName='class'">把id属性改成class属性</button>
   <!-- 动态事件 -->
   <button @[mouseEvent]="attributeName='class'">动态事件</button>
   <!-- 改变上面那个事件 -->
   <!-- 把上面那个点击时间改成鼠标移上事件 -->
   <button @click="mouseEvent='mouseover'">把点击事件改成鼠标移上事件</button>

  </div>
</template>

<style>
#username {
  color: red;
}
.username {
  font-size: 50px;
  color: rgb(53, 4, 228);
}
</style>