vue常用指令 - - php.cnBlog

Home > List of blog posts > vue常用指令

Blogger Information

Blog 16

fans 0

comment 0

visits 16821

Special Recommendation

More>

Related recommendations

实例演示 ——（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>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html一些基本概念

2020-12-14 19:10:02