（第三天）Vue插值操作，v-bind语法

﹏ヽ暗。殇╰゛Y 2022-12-17 05:20 97阅读 0赞

# 1：插值操作 #

Moustache语法：\{ \{message\}\}不仅仅可以定义变量、常量还能进行数值运算、字符串拼接等操作。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    
    <body>
    <script src="../js/vue.js"></script>
      <div id="app">
        {
       {message}}
        <h1>{
       {message}},西巴</h1>
        
        <h2>{
       {firstName+lastName}}</h2>
        <h2>{
       {firstName+ '  ' +lastName}}</h2>
        <h3>{
       {counter *4}}</h3>
      </div>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          message: '你好Vue',
          firstName: 'kebe',
          lastName: 'bryant',
          counter : 100
        }
      })
    </script>
    
    </body>
    </html>

2：v-once指令 :只允许页面第一次渲染对值进行修改，后续不允许修改。

<div id="app">
        {
       {message}}
        <h2 v-once>{
       {message}} </h2> 
      </div>
      <script src="../js/vue.js"></script>
        <script>
          const app = new Vue ({
            el : '#app',
            data: {
              message: '你好Vue',
            }
          })
      </script>

3：v-html：当后台传来一个字符串“<a href="xxx">xxxx</a>”前台需要直接将这个进行展示

<div id="app">
           {
       {message}}
           <p v-html="url"></p>
         </div>
         <script src="../js/vue.js"></script>
           <script>
             const app = new Vue ({
               el : '#app',
               data: {
                 message: '你好Vue',
                 url : '<a href="www.baidu.com">百度一下</a>'
               }
             })
         </script>

4：v-text指令 ：与Moustache语法不同的是：v-text是覆盖原有的内容，进行新增

<div id="app">
        <p>{
       {message}}</p>
        <p v-text="message"></p> 
        <p v-pre>{
       {message}}</p> 
      </div>
        <script src="../js/vue.js"></script>
          <script>
            const app = new Vue ({
              el : '#app',
              data: {
                message: '你好Vue',
              }
            })
        </script>

5：v-cloak：页面进行js卡住没有进行vue解析时会显示\{ \{xxx\}\}这样难看的标志。

<div id="app" v-cloak>
          {
       {message}}
        </div>
        <script src="../js/vue.js"></script>
          <script>
            /*
            * 在vue解析之前，div有一个叫v-cloak的属性
            * 在vue解析之后，div没有一个叫v-cloak的属性
            * */
            /*代码从上到下执行，有些时候js代码会卡住，页面首先展示的是{
       {message}}，然后才进行渲染*/
            setTimeout(function () {
              const app = new Vue ({
                el : '#app',
                data: {
                  message: '你好Vue',
                }
              })
            },1000)
        </script>

# 2：v-bind初体验 #

Moustache是对元素内的值进行改变渲染，v-bind是对元素属性进行渲染

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
       <div id="app">
         <img v-bind:src="url" />
         <a v-bind:href="baiduUrl">百度一下</a>
         
         <img :src="url"/>
         <a :href="baiduUrl">百度一下</a>
        </div>
         <script src="../js/vue.js"></script>
    
    
           <script>
             const app = new Vue ({
               el : '#app',
               data: {
                 message: '你好Vue',
                 url : 'https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png',
                 baiduUrl : 'http://www.baidu.com'
               }
             })
         </script>
    </body>
    </html>

2：v-bind动态绑定class   对象语法

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        .active{
          color:red;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <p class="active">{
       {message}}</p>
        <p :class="active">{
       {message}}</p>
    
        
        <p :class="{active: isActive,line : isLine}">v-bind测试</p>
      </div>
      <div id="app2">
        
        <p :class="{active:isActive}">{
       {message}}</p>
        <button v-on:click="changeButton">点击变色</button>
      </div>
        <script src="../js/vue.js"></script>
          <script>
            const app = new Vue ({
              el : '#app',
              data: {
                message: '你好Vue',
                active: 'active',
                isActive: true,
                isLine: true
              }
            })
    
            const app2 = new Vue({
              el: '#app2',
              data: {
                message: '改变颜色点击按钮',
                active: 'active',
                isActive: true
              },
              methods:{
                changeButton :function(){
                  this.isActive=!this.isActive
                }
              }
            })
        </script>
    </body>
    </html>