vue基本语法学习-1

1、v-html
v-html ：以html的格式输出

    <table>
      <!-- 表格行 -->
      <!-- 使用了2种标签v-html 和v-if -->
      <!-- v-html ：以html的格式输出 -->
      <!-- v-if ：通过获取data里面的属性决定元素是否显示 -->
      <tr>
        <td>
          <button @click="show_v_html_label()">测试显示/隐藏 【v-html】</button>
        </td>
        <td>
          <p v-html="html_str" v-if="sw_show_html"></p>
        </td>
      </tr>
    </table>

data为：

        sw_show_html:false,// 控制是否显示v-html标签

        html_str: '<p> test v-html </p>',

click方法：

      show_v_html_label(){
        this.sw_show_html = !this.sw_show_html;
      },

测试截图；

@click是v-on:click的缩写

2、v-bind和v-on

    <table>
      <!-- 测试v-bind 和 v-on ，这两个标签都可以缩写-->
      <!-- 可以绑定v-bind:src v-bind:href v-bind:class 。可缩写为 :src :href :class -->
      <!-- v-on: 监听DOM事件 例如：【v-on:click】 点击事件 也可以缩写成 【@click】 。鼠标移动到组件上【v-on:mouseenter】可以缩写成【@mouseenter】-->
      <tr>
        <td>
          <button v-on:click="chang_img_src()">切换src【v-bind:src】</button>
          <button @click="chang_img_src()">切换src【@click】</button>
          <button v-on:mouseenter="chang_img_src()">鼠标移动切换src【v-on:mouseenter】</button>
        </td>
        <td>
          <img v-bind:src='img_url' width="100dp" height="80dp">
        </td>
      </tr>
    </table>

测试data

img_index:1,//设置图片索引
img_url:"",
img_url_1:'http://t9.baidu.com/it/u=3363001160,1163944807&fm=79&app=86&f=JPEG?w=1280&h=830',
img_url_2:'http://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1594713325&t=6d306afefca8cf412268d2f9748aee46',

方法：

   chang_img_src(){// 修改图片的url
      if(this.img_index ===1){
        this.img_index ++;
        this.img_url = this.img_url_2;
      }else{
        this.img_index --;
        this.img_url = this.img_url_1;
      }
    },

运行截图：

3、v-model
用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

    <table>
      <!-- 测试v-model ，用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值-->
      <tr>
        <td>
          <p>测试v-model在input标签中使用 :{{msg_model_str}}</p>
        </td>
        <td>
          <input v-model="msg_model_str">

          <!-- 上面是这个语句的简写 -->
          <input :value="msg_model_str" @input="msg_model_str= $event.target.value">

          <!-- 上面是这个语句的简写 v-bind 和 v-on都可以缩写-->
          <input v-bind:value="msg_model_str" v-on:input="msg_model_str= $event.target.value">
        </td>
      </tr>
    </table>

data：

msg_model_str:'test v-model',

运行截图：

**4、filter ，使用 | **
vue中的过滤器的使用
前面的值（test_str）会作为参数传递给后面的filter方法

    <!-- 测试filters 过滤器 |  ， 过滤器可以串联-->
    <table>
      <tr>
        <td>
          <p>测试filters | 前面的值（test_str）会作为参数传递给后面的filter方法 = </p>
        </td>
        <td>
          {{'test_str' | capitalize | capitalize1}}
        </td>
      </tr>
    </table>

方法：

    filters:{
      capitalize (value) {
        return value + '-first_filter'
      },
      capitalize1 :function (value) {// 方法不同的写法而已
        return value + '-second_filter'
      }
    },

运行截图：

5、v-else
测试v-else 指令, 注意v-else后面不需要跟属性

    <!-- 测试v-else 指令, 注意v-else后面不需要跟属性-->
    <table>
      <tr>
        <td>
          <p> </p>
          <button @click="test_v_else()">测试v-else 指令</button>
        </td>
        <td>
          <p v-if="b_test_else">{{ramdon_num}} : 大于0.5</p>
          <p v-else>{{ramdon_num}}: 小于0.5</p>
        </td>
      </tr>
    </table>

data：

        b_test_else:false,
        ramdon_num:0,

方法：

test_v_else(){
        this.ramdon_num = Math.random();
        if(this.ramdon_num > 0.5){
          this.b_test_else = true;
        }else{
          this.b_test_else = false;
        }
      },

运行截图：

6、v-show指令
和v-if功能一样，可以控制是否加载元素

    <table>
      <!-- 测试v-show指令 和v-if功能一样 -->
      <tr>
        <td>
          <button @click="show_v_html_label()">测试显示/隐藏 【v-show】</button>
        </td>
        <td>
          <p v-html="html_str" v-show="sw_show_html" ></p>
        </td>
      </tr>
    </table>

运行截图：

7、v-for指令
需要注意的是：需要加上v-bind:key,虽然功能正常，但会报语法错误

    <table>
      <!-- 测试v-for指令 -->
      <!-- 需要注意的是：需要加上v-bind:key,虽然功能正常，但会报语法错误 -->
      <tr>
        <td>
          <p>测试指令 【v-for】:</p>
        </td>
        <td v-for="item in sites" v-bind:key='item'>
          <p>name={{item.name}}, </p>
        </td>
      </tr>
    </table>

    <table>
      <!-- 测试v-for指令 ,循环整数-->
      <!-- 需要注意的是：需要加上v-bind:key,虽然功能正常，但会报语法错误 -->
      <tr>
        <td>
          <p>测试指令【v-for】:</p>
        </td>
        <td v-for="n in 5" v-bind:key='n'>
          <p>n={{n}}, </p>
        </td>
      </tr>
    </table>

data:

        sites:[
          { name: 'Baidu' },
          { name: 'Google' },
          { name: 'Taobao' }
        ],

运行截图：

8、computed指令
computed和methods都是定义方法，区别是，computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行

    <table>
      <!-- 测试computed指令，computed和methods区别是，computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
      而使用 methods ，在重新渲染的时候，函数总会重新调用执行-->
      <tr>
        <td>
          <p>测试计算属性【computed】{{message}}反转:</p>
        </td>
        <td >
          <p>{{reversedMessage}}</p>
        </td>
      </tr>
    </table>

方法：

    computed: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    },

运行截图：