Vue--常见指令

迷南。 2022-12-07 04:25 168阅读 0赞

vue实例的作用范围：在el选择的元素内部都可以，使用el进行挂载  
选择器：除了id选择器以外，还有class选择器，标签选择器  
vue取消了对dom元素的操作，通过this关键字来改变值  
1.v-text：设置标签文本值，如果要替换部分内容要使用两个大括号的写法， 字符串的拼接，外面是是双引号里面就用单引号  
2. v-html:设置标签的innerHTML，如果是html代码会自动解析  
3. v-on:为元素绑定事件,也可以使用@代替,可以传递自定义参数，事件修饰符， 事件绑定的方法写成函数调用的形式，可传入自定义参数，定义方法时需要定义形参来接收传入的实参  
4. v-show:根据表达式的真假，切换元素的显示和隐藏,也可以是false或者true(操纵样式，display属性来判断)，如果频繁切换用它比较好  
5. v-if：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）动态的向DOM树内添加或者删除DOM元素  
v-show的其实就是控制css，v-if有局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件。v-show都会编译，初始值为false,只是将display设为none,但它也编译了，v-if初始值为false,就不会被编译，v-show只编译一次，后面就是控制css，但是v-if会不停的进行销毁和创建，所以v-show的性能稍好一些  
6. v-else:要和v-if一起用，v-if为false时它才显示。以上三个是条件渲染指令  
7. v-bind:设置元素属性（比如：src,title,class）  
8. v-for:根据数据生成列表结构， vue中重写了数组方法。如果遍历的是数组，则有两个参数，一个是值，一个是索引，如果遍历的是对象，则有三个参数，一个是值，一个是值的属性名，一个是索引  
9. v-model:获取和设置表单元素的值（双向数据绑定）  
10. ref:为某个元素注册一个唯一标识，vue对象通过$refs属性访问这个元素对象  
11. v-cloak:使用它防止闪现表达式，与css配合：\[v-clock\]\{display:none\}  
以上指令用法实例：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                alert('---');
                var app = new Vue({
                    el:"#app",
                    data:{
                        message:'明天你好',
                        info:'热爱可抵岁月漫长',
                        content:"<a href='https://www.baidu.com'>百度</a>",
                        theText:"我喜欢吃",
                        isShow:false,
                        domIsShow:false,
                        temperature:36,
                        imgSrc:"src/1.jpg",
                        imgTitle:"肖战",
                        isActive:false,
                        arr:["北京","上海","成都"],
                        vegetables:[
                            {name:"豆干炒芹菜"},
                            {name:"清炒蔬菜"}
                            ],
                        showMessage:"肖战"
                    },
                    methods: {
                        doIt:function(){
                            alert("你好");
                        },
                        changeText:function(){
                            this.theText +='桃子';
                        },
                        showOrhidden:function(){
                            this.isShow = !this.isShow;
                        },
                        toggleIsShow:function(){
                            this.domIsShow = !this.domIsShow;
                        },
                        toggleActive:function(){
                            this.isActive = !this.isActive;
                        },
                        add:function(){
                            this.vegetables.push({name:"西红柿鸡蛋汤"});
                        },
                        remove:function(){
                            this.vegetables.shift();//删除最后一个元素
                            //splice(index,number)//从指定位置删除元素，删除几个
                            //splice(index,number，newP)实现替换
                        },
                        addcanshu:function(p1,p2){
                            alert(p1);
                            alert(p2);
                        },
                        sayHi:function(){
                            alert("你好");
                        },
                        getM:function(){
                            alert(this.showMessage);
                        },
                        setM:function(str){
                            this.showMessage=str;
                        },
                        hint(){
                            alert(this.$refs.content.textContent);
                            // alert(this.$refs.content.innerHTML);
                        }
                    },
                });
            };
        </script>
        <body>
        <div id="app">
            <p v-text="message"></p>
            <p>{
       {info}},温柔可挡艰难时光</p>
            <p v-text="message+'!'"></p>
            <p v-html="content"></p>
            <button value="事件绑定" v-on:click="doIt">单击</button>
            <button value="事件绑定" v-on:dblclick="doIt">双击</button>
            <button value="事件绑定" v-on:mousedown="doIt">鼠标按下</button>
            <button value="事件绑定" @click="doIt">简写单击</button>
            <h2 v-on:click="changeText">{
       {theText}}</h2>
            <button @click="showOrhidden">隐藏显示</button>
            <h2 v-show="isShow">热爱可抵岁月漫长，相互保护不是说说而已</h2>
            <button @click="toggleIsShow">v-if</button>
            <p v-if="false">成功了</p>
            <p v-else>v-else(失败了)</p>
    
            <p v-if="domIsShow">平安喜乐，万事顺意</p>
            <p v-if="temperature>=35">太热了</p>
           
            
            <br>
            
             <img :src="imgSrc" :title="imgTitle+'！！！'" :class="isActive?'active':''" @click="toggleActive">
            <img :src="imgSrc" :title="imgTitle+'！！！'" :class="{active:isActive}" @click="toggleActive">
            <ul>
                <li v-for="(item, index) in arr" :key="index">
                    我喜欢的城市：{
       {item}}--{
       {index}}
                </li>
            </ul>
            <h2 v-for="(item,index) in vegetables" v-bind:title="item.name">
                我喜欢吃的菜：{
       {item.name}}--{
       {key}}--{
       {index}}
            </h2>
            <h2 v-for="(item,key,index) in person" v-bind:title="item.name">
                {
       {item}}--{
       {key}}--{
       {index}}
            </h2>
            <button @click="add">添加</button>
            <button @click="remove">删除</button>
            <button @click="addcanshu(123,456)">参数</button>
            <input type="text" @keyup.enter="sayHi">
    
            <input type="text" v-model="showMessage" @keyup.enter="getM">
            <h2>{
       {showMessage}}</h2>
            <button @click="setM('热爱可抵岁月漫长')">修改数据</button>
            <p ref="content">wangt.com</p>
            <button @click="hint">提示</button>
            <p v-cloak>啦啦啦啦</p>
        </div>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue指令

Vue指令 * v-text * v-html * v-show * v-if * v-else * v-else-if * v-for ...

迈不过友情╰/ 2024年04月17日 05:59/ 0 赞/ 68 阅读

相关 vue 指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2023年11月05日 00:52/ 0 赞/ 100 阅读

相关 vue指令

总结 v-text v-text是一个渲染文本的指令不能解析标签会把标签当成字符串渲染在页面上 v-html v-html 也是一个渲染

电玩女神/ 2023年02月22日 13:56/ 0 赞/ 5 阅读

相关 vue指令

vue指令一个正在努力爱好运动的前端座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 -------------------- 文章目录

朱雀/ 2022年12月22日 06:12/ 0 赞/ 133 阅读

相关 Vue--常见指令

vue实例的作用范围：在el选择的元素内部都可以，使用el进行挂载选择器：除了id选择器以外，还有class选择器，标签选择器 vue取消了对dom元素的操作，通过t

迷南。/ 2022年12月07日 04:25/ 0 赞/ 169 阅读

相关 vue指令

vue介绍 1.作者尤雨溪(vue) \[阿里\] 3.0 2.vue概念官网：[Vue.js][] 渐进式 JavaScript 框架渐进式：主

偏执的太偏执、/ 2022年09月16日 06:05/ 0 赞/ 148 阅读

相关 vue中常见指令

一、视图输出指令作用：把 model绑定到view v-text和v-html 1. 默认 v-text 是没有闪烁问题的，v-text可以简写为

逃离我推掉我的手/ 2022年01月10日 06:53/ 0 赞/ 248 阅读

相关 Vue指令

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 非商业用途自由转载，保持署名，注明出处！ -------

待我称王封你为后i/ 2021年11月17日 13:10/ 0 赞/ 423 阅读

相关常见 Vue.js 指令1

Vue.js 指令什么是 Vue.js 指令指令是带有 v- 前缀的特殊属性 ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

绝地灬酷狼/ 2021年10月01日 07:20/ 0 赞/ 414 阅读

相关 Vue指令

Vue指令 1. watch监听在vue中watch就是时时刻刻的监听绑定的这个data模型数据，当这个数据发生变化的时候，watch就会被触发，自动的执行其中的

￡神魔★判官ぃ/ 2021年07月24日 19:31/ 0 赞/ 495 阅读