浅谈vue 常用指令实例

最新推荐文章于 2022-09-19 19:10:02 发布

上上迁

最新推荐文章于 2022-09-19 19:10:02 发布

阅读量90

点赞数

分类专栏：浅谈VUE 文章标签： vue js javascript

上上迁

本文链接：https://blog.csdn.net/aa327056812/article/details/110098402

版权

浅谈VUE 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

前言
- 关键字
一、定义
三、使用及场景
总结

前言

关键字

{{表达式}}，v-text：，v-html：， v-model，v-on:，v-for，v-if=，v-else，v-else-if，v-show，v-bind

一、定义

什么是指令？
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的
职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

三、使用及场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myapp">
        <!-- {{}} 
        该表达式支持JS语法，可以调用js内置函数（必须有返回值）
        表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
        可以直接获取Vue实例中定义的数据或函数-->
        {{date}}--{{age}}
        <br/> 
        <br/> 
        <!-- v-text和v-html -->
          v-text:<span v-text="name"></span>
        <br/> 
        <br/> 
          v-html:<span v-html="name"></span>
          <!-- v-model 数据双向绑定-->
          <input type="text" v-model="age" />
          <!-- v-bind：value  数据绑定不修改值 -->
          <br/>
          <input type="text" v-bind:value="age" />
          <!-- 事件 -->
          <br/>
          <button v-on:click="add">涨一岁</button>
          <br/>
          <button v-on:click="down">穿越降一岁</button>
          <!-- v-on:for  if else -->
          
          <!-- v-for  if else -->
          
          <ul>
              <li v-for="user in users"  v-if="user.six === '男'" > 
                  
                  {{user.name}} - {{user.six}} - {{user.age}}
                  
                </li> 
            </ul>
            <ul><li v-for="(value,key,index) in users"> 
                {{index}} - {{key}} : {{value}} 
            </li> </ul>
            <!-- 快捷事件 -->
            <br/>
            <button v-on:click="show =! show" >展示</button>
            <h1 v-if="show"> 
                十里平湖霜满天,
                岁岁青丝愁华年。

            </h1>
            <!-- 监听属性 -->
            <br/>
            <input type="text" v-model="message" />
            <!-- 时间格式化-->
            
            <h1>Birthday：{{birth}} </h1> 
    </div>
    <!-- 引入依赖 -->
    <script src="../node_modules/vue/dist/vue.js" ></script>
    <!--  -->
    <!-- 创建实例 -->
    <script>
        new Vue({
            //绑定元素
            el:"#myapp",
            //提供数据
            data:{
                name:"<H1>上上迁</H1>",
                date:"20201123",
                age:30,
                show:true,
                users:[ {name:'上上迁', six:'女', age: 1},
                        {name:'上上迁1', six:'男', age: 22},
                        {name:'上上迁2', six:'女', age: 33},
                        {name:'上上迁3', six:'女', age: 44},
                        {name:'上上迁4', six:'女', age: 55} ],
                message:"变化监听",
                birthday:1522342222233 // 毫秒值
            },
            methods:{
                // 添加事件集合
                add(){
                    this.age++;
                },
                down(){
                    this.age--;
                }
            },
            watch:{
                 message(nVal, oVal){
                      console.log(nVal, oVal); 
                      } 
                    },
                computed:{
                     birth(){ // 计算属性本质是一个方法，但是必须返回结果
                 let d = new Date(this.birthday); return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay(); 
                } 
                }
        });
    </script>
</html>