vue常用指令 - - php.cn博客

实例演示 ——（vue 挂在点和Vue实例）

 <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 设置一个 挂载点 -->
    <div class="gzd">
        <!-- {{}}数据占位符  -->
        <p>11111{{test}}</p>
        <p>{{be ? 'true真' : 'false假'}}</p>
    </div> 
    <script>
        // 实例化 vue 
        const Vus = new Vue({
            //挂在元素
            el: document.querySelector('.gzd'),
            // document.querySelector('.gzd'),
            // el: '.gzd',
            //数据注入
            data: {
                test: 'vue-测试0',
                name: '御弟哥哥',
                //be: false,
                be: true,
            },
        });
        // console.log(Vus.le);
        //访问data属性 数据 的两种方法
        // 因为 vue中的data中的属性会自动成为vue实例的属性，
        console.log(Vus.test);
        console.log(Vus.$data.name);
        console.log(Vus.name);
        //vue 指令 ：vue实例管理的自定义属性，称为指令
        // v-text :
        // v-once :
        // v-html :
        const vus2 = new Vue({
            //el:'.app',
            el: document.querySelector('.app'),
            data:{
                name:'刚哥6',
            }
        });
        console.log(vus2.name);
    </script>

实例演示 —— (v-model双向绑定)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="mod">
        <p>单选绑定：模型中的数据改变后模板的数据跟着改变------{{name}}</p>
        <p>模型中的数据：--{{name}}</p>
        <!-- 双向绑定 就是指：在页面中改变值后，模型中的数据也更正改变 
            须要注意：须要监听input输入框的值，input事件  点击的哪一个的输入框，的值
            input  keyup 两个都可以
        -->
        <p>双向绑定：在页面中改变值后，模型中的数据也更正改变---<input type="text" name='' :value="name" @input="name=$event.target.value"></p>
        <p>双向绑定：在页面中改变值后，模型中的数据也更正改变---<input type="text" name='' v-bind:value="name" v-on:keyup="name=$event.target.value"></p>
             <!-- 通过 vue  语法糖 （@input="name=$event.target.value"  ===  v-model 简写 ） -->
              <!-- v-model也可以和.lazy、.trim和.number这些修饰符一起使用。 -->
            <!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步  -->
            <!-- input v-model.lazy="msg"    .lazy 懒加载 按回车(或失去焦点)后才会更新数据 -->
             <!-- v-model.trim="msg"      .trim   去除字符串首尾的空格-->
            <!-- v-model.number="msg"     .number  将数据转化为数值类型 -->
        <p>v-model 双向绑定模型数据：---{{name1}}</p>
        <!-- <p>v-model 双向绑定：<input type="text" name="" value="name1" v-model="name1"></p> -->
        <p>v-model 双向绑定lazy：<input type="text" name=""  v-model.lazy="name1"></p>
        <p>v-model 双向绑定number：<input type="text" name=""  v-model.number="name1"></p>
        <p>v-model 双向绑定trim：<input type="text" name=""  v-model.trim="name1"></p>
        <p>v-model 双向绑定number：<input type="text" name=""  v-model.number="num"></p>
        <p>{{typeof num}}</p>
    </div>
    <script>
        const ModVm = new Vue({
                el: '#mod',
                data: {
                    name:'观音姐姐666888',
                    name1:'王母娘娘',
                    num:'666',
                },
            });
            //  console.log(ModVm.name1.typeof());
            //  console.log(typeof(ModVm.num));
    </script>

实例演示 ——（v-bind,v-on指令）

 <style>
        .cor1{
            color:blue;
            background-color: yellowgreen;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 挂载点 -->
<div class="app">
    <!-- <p style='color:red'>{{name}}</p> -->
    <!-- 绑定style 属性 -->
    <p v-bind:style='style1'>{{name}}</p>
    <!-- 
        v-bind是高频指令可以 简写成 ：
        可以直接加 ： 省略v-bind
     -->
    <p :style='style1'>{{name}}</p>
    <!-- 绑定类class属性 -->
    <!-- 字面量方式 -->
    <p :class='`cor1`'>{{name}}</p>
    <p :class=`cor1`>{{name}}</p>
    <!-- 表达式方式 -->
    <p :class='cls'>{{name}}+表达式</p>
    <p :class='{cor1:false} '>{{name}}+表达式</p>
    <p :class='{cor1:true} '>{{name}}+表达式</p>
    <p :class='{cor1:zhuangtai} '>{{name}}+表达式zt</p>
    <!-- 绑定事件  v-on -->
    <p><a href="www.baidu.com" v-on:click='show'>打开百度1</a></p>
    <!--
         阻止a标签的默认跳转行为 
         prevent修饰符：阻止元素的默认行为
    -->
    <p><a href="www.baidu.com" v-on:click.prevent='show'>打开百度2</a></p>
    <!-- 
        v-on 也是高频指令 可以简写为  @
     -->
     <p><a href="www.baidu.com" @click.prevent='show'>打开百度3</a></p>
     <!-- stop: 阻止事件冒泡 -->
     <!-- <p><a href="www.baidu.com" @click.prevent.stop='show'>打开百度3</a></p> -->
     <!-- once 只允许执行一次 -->
     <!-- <p><a href="www.baidu.com" @click.prevent.once.stop='show'>打开百度3</a></p> -->
     <!--
          事件方法的传参
          事件对象 的 参数名 必须是$event
     -->
     <button @click="sum($event,100,200)">click点击</button>
</div>
    <script>
        const Vm = new Vue({
           //绑定挂载点
            el: '.app',
            //注入自定义属性
            data:{
                name:'如来佛祖',
                style1:'color:red',
                cls:'cor1',
                // true 和 false 不能加 引号，加了引号就转换成字符串了
                zhuangtai: true,
            },
            //注入方法（函数）
            methods: {
                show() {
                    //this 指的是  Vm ，vue的实例对象
                   alert(this.name);
                },
                sum(ev,a,b){
                    //查看被点击的元素和事件类型
                    // console.log(ev.type,ev.target);
                   console.log(a + b) ;
                   console.log(`a:${a}+b:${b}=${a+b}`) ;
                },
            },
        });
    </script>

实例演示 ——（v-for,key 遍历）

<!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div class="app">
        <ul>
            <!-- key :可以干预 diff 算法 -->
            <!-- vue 通过稳定且唯一的 key 值判断这个节点是否须要重新渲染，以提升效率 -->
            <!-- key 只能是 整数或者字符串 -->
            <li v-for="(item,index ) in adds" :key="index">{{index}}----{{item}}</li>
        </ul>
        <ol>
            <li v-for="(item, key, index) in obj111" :key="key">{{item}}----{{key}}--kye---{{index}}</li>
        </ol>
        <ol>
            <li v-for="(item ,index) in obj222" :key='item.id'>{{item.id}}---{{item.name}}----{{item.gj}}</li>
        </ol>
    </div>
    <script>
        const AppVm = new Vue({
            el: '.app',
            data: {
                //数组
                adds: ['成都', '重庆', '西安', '北京'],
                //对象
                obj111: {
                    name: '如来佛祖的舅舅的外甥的妈妈是谁的妈妈',
                    sex: '如来佛祖是男的还是女的啊',
                    age: '如来多少岁了',
                },
                //对象数组
                // obj222: {
                //     ['日本','中国','韩国','朝鲜','印度']
                //     ['亚洲','欧洲','大洋洲','北美洲','南美洲','非洲']
                //     ['小孩','大人','男人','女人','老人','好人','坏人']
                // },
                obj222: [
                    { 'id': '1', 'name': '八戒', 'gj': '朝鲜' },
                    { 'id': '12', 'name': '悟空', 'gj': '美国' },
                    { 'id': '112', 'name': '如来', 'gj': '日本' },
                ],
            },
        });
    </script>

实例演示 ——（v-text,v-once,v-html指令）

<!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div class="app">
<!-- v-text: 是专门由 vue实例 管理的自定义属性， 称为vue指令 -->
<!-- v-text 可以理解为 textContent和 innerText,<p>这里会补占用，写了也不会显示</p> -->
<p v-text='name'>这里写的不会显示</p>
<p v-text='name'>{{name}}</p>
<p v-text>{{name}}</p>
<!-- {{sex}}  注意语法：这里还不能写引号 -->
<p v-once>{{sex}}</p>
 <p v-once>{{sex}}</p> 
 <p v-once='sex'></p>
 <!-- v-html 可以理解为 innerHtml 它支持html 标签 -->
 <p v-html='ben'></p>
    </div>
    <script>
        const Vm = new Vue({
            el: '.app',
            data:{
                name:'山鸡扛把子',
                sex: '不是男人就是女人，21世纪没有太监，哦错了！还有人妖666',
                ben:"<p style='color:red'> 你好我是html</p>",
            }
        });
    </script>