天天看点
返回

Vue基础 ---指令系统Vue指令系统

Vue指令系统

vue 指令是什么？

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

vue常用指令：

1.数据绑定

非表单元素_单向数据绑定_：div span ul li h1-h6 p等

{{}} v-html v-text

模板语法：

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

{{}} 模板语法 优点：简单 方便 缺点：不能解析标签，首屏会出现闪屏问题

v-html 优点：可以解析标签 缺点：不方便

v-text 优点：可以解决首屏闪屏问题 缺点：不方便，不能解析标签

<div id="app">
        <h1>模板语法</h1>
        <div>{{msg}}</div>
        <!-- {{}}内部js解析，{{}}外面 html解析 -->
        <div>hello, {{name}}</div>
        <!-- {{}} 内部必须遵循js的语法 -->
        <div>{{'hello,'+name}}</div>
        <!-- {{}} 三元 -->
        <div>{{n>10?name:'王昭君'}}</div>
        <!-- {{}} 方法 -->
        <div>价格：{{price.toFixed(2)}}</div>
        <div>{{strHTML}}</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"画画的baby,画画的baby",
                name:"妲己",
                n:10,
                price:19.90,
                strHTML:"<em>哈哈哈哈</em>"
            },
            methods:{}
        })
    </script>

表单元素_双向数据绑定_:Input、textarea、select-option …

v-model:双向数据绑定

<div id="app">
        <!-- 视图 -->
        <h2>{{name}}</h2>
        <input type="text" v-model="name">
        <button v-on:click="login()">提交</button>
    </div>
    <script>
        // 4.实例化vue对象
        new Vue({
            //element
            el:"#app",
            data:{//数据 模型
                //双向数据绑定
                //MVVM模式： M-model模型 V-view视图  VM-viewModel视图模型
                //模型通过 视图模型 控制视图，视图又可以 通过视图模型 修改模型，视图模型是模型和视图之间的桥梁
                //MVVM模式
                name:"张三"
            },
            methods:{
                login(){
                    console.log(this.name);
                }
            }
        })
    </script>

2.属性绑定

媒体元素：img video

v-bind 简写

：

v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

<div id="app">
        <!-- 属性绑定 v-bind,可以绑定已经存在的属性，也可以绑定自定义属性  -->
        <!-- v-bind 后面的内容必须满足js的语法 -->
        <a v-bind:href="compony.url"  v-bind:title="compony.name">
            <img v-bind:src="compony.logo" alt="易烊千玺">
        </a>
        <!-- 属性可以自己定义 -->
        <div v-bind:sum="x+y+'aa'">这是自己定义的</div>

        <!-- 简写 : -->
        <a :href="compony.url" :title="compony.name">
            <img :src="compony.logo" alt="">
        </a>
        <div :sum="x+y+'aa'">这是自己定义的</div>
    </div>
			<script>
        // 3.实例化
        new Vue({
            el:"#app",//挂载点
            data:{//属性
                compony:{
                    name:"易烊千玺",
                    url:"https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
                    logo:"https://bkimg.cdn.bcebos.com/pic/9825bc315c6034a881b02393c413495409237656?x-bce-process=image/resize,m_lfit,h_500,limit_1"
                },
                x:10,
                y:20
            },
            methods:{//方法

            }
        })
    </script>

动态属性

动态class=>：class 
<!-- 第一种方式： :class="变量" -->
    <h3 :class="class1">天道酬勤</h3>
    <!-- 第二种方式 ： :class="[三元]" 就只有两种情况 -->
    <h3 :class="[aa?'red blue':'yellow purple']">人道酬善</h3>
    <!-- 第三种方式 :class="{'类名1':boolean,'类名2':boolean}" -->
    <h3 :class="{'red':isRed,'yellow':isYellow,'lime':isLime,'purple':isPurple,'blue':isBlue}">商道酬信</h3>
    
	<div v-bind:class="{ active: isActive }"></div>
	<script>
		new Vue({
	        el:"#app",//挂载点
	        data: {
				isActive: true,
				hasError: false
			}
	    })
	</script>
动态style:=>：style

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 或短横线分隔来命名

<!-- 动态style  :style="json" -->
	<div v-bind:style="styleObject"></div>
	<!-- 动态style  :style="[数组语法]" -->
	<div v-bind:style="[baseStyles, overridingStyles]"></div>
	<button v-on:click="changeColor()">点击字体颜色改为orange</button>
	
	<script>
 		new Vue({
            el:"#app",//挂载点
            data: {
			  styleObject: {
			    color: 'red',
			    fontSize: '13px'
			  }
			},
			methods:{//方法
                changeColor(){
                    this.json.color="orange"
                }
            }
        })
       </script>

3.条件渲染

v-if v-show v-else

相同点：

v-if 和v-show 都是true显示，false 消失

不相同点：

v-if false 不加载节点-惰性加载

v-show false 加了display:none；

使用场景：

频繁切换，建议使用v-show,不频繁切换，建议使用v-if.

补充：v-else

v-else必须接着v-if

v-if v-else

<h2 v-if="isShow">优秀是一种习惯</h2>
  	<h2 v-else>认真是一种态度</h2>
 	<div id="app">
        <!-- v-if 条件渲染，true 出现，false消失。 -->
        <h3 v-if="false">画画的baby 画画的baby</h3>
        <!-- 0为假，非0即为真 -->
        <h3 v-if="-1">奔驰的小野马和带刺的玫瑰</h3>

        <h3 v-if="a">优秀是一种习惯</h3>
        <h3 v-if="b">认真是一种态度</h3>

        <button v-on:click="toggle()">切换</button>
        <h3 v-if="isshow">坚持是一种品格</h3>
        
        <h3 v-if="comment.length==0">暂无数据</h3>
        <h3 v-if="comment.length>0">有数据</h3>
        <hr>
        <h3 v-if="comment.length==0">暂无数据</h3>
        <h3 v-else>有数据</h3>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                a: true,
                b: '123',
                isshow: true,
                comment:["物美价廉",'特别好',"推荐"]
            },
            methods: {
                toggle() {
                    /*
                    if (this.isshow) {
                        this.isshow = false
                    } else {
                        this.isshow = true;
                    }*/ 
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>

v-show

<div id="app">
       <!-- v-show true 出现，false 消失 -->
        <h3 v-show="false">画画的baby 画画的baby</h3>
       
        <button v-on:click="toggle()">切换</button>
        <h3 v-show="isshow">坚持是一种品格</h3>

    </div>
    <script>
        new Vue({
            //element
            el: "#app",
            data: {
                isshow: true
            },
            methods: {
                toggle() {
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>

4.列表渲染

v-for

v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<div id="app">
        <ul>
            <li v-for="(item,index) in comment">{{index+1}}-{{item}}</li>
        </ul>
        <div>
            <a :href="item.url" :title="item.name" v-for="(item,index) in website">
                <img :src="item.logo" alt="">
            </a>
        </div>
        <div class="box">
            <div class="item" v-for="x in goods">
                <img :src="x.img" alt="">
                <h3>{{x.title}}</h3>
                <p>{{x.info}}</p>
                <p>{{x.num}}</p>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                comment: ["物美价廉", '特别好', "推荐", "物美价廉", '特别好', "推荐"],
                website: [{
                        name: "京东",
                        url: "http://jd.com",
                        logo: "http://img1.360buyimg.com/da/jfs/t1/17098/23/11599/160999/5c90a484E27dd5514/7287f0d182775168.gif"
                    },
                    {
                        name: "淘宝",
                        url: "http://taobao.com",
                        logo: "http://img.alicdn.com/tfs/TB1UDHOcwoQMeJjy0FoXXcShVXa-286-118.png"
                    },
                    {
                        name: "百度",
                        url: "http://baidu.com",
                        logo: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
                    },
                ],
                goods: [{
                        img: "https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_360x360xzq90.jpg_.webp",
                        title: "大豆家  方头奶奶鞋",
                        info: "一脚蹬设计，方便日常的穿脱。",
                        num: "378人都说好"
                    },
                    {
                        img: "https://img.alicdn.com/tfscom/i3/2459354798/TB2IyE5eUhnpuFjSZFpXXcpuXXa_!!2459354798.jpg_360x360xzq90.jpg_.webp",
                        title: "大豆家  方头奶奶鞋",
                        info: "一脚蹬设计，方便日常的穿脱。",
                        num: "358人都说好"
                    },
                    {
                        img: "https://img.alicdn.com/tfscom/i4/654230132/O1CN011CqUjXBxyNTXTMy_!!654230132.jpg_360x360xzq90.jpg_.webp",
                        title: "大豆家  方头奶奶鞋",
                        info: "一脚蹬设计，方便日常的穿脱。",
                        num: "58人都说好"
                    },

                ]
            }
        })
    </script>

vue的v-for更新的时候采用的是“就地更新”原则，如果更新的时候想要提高更新的性能，我们需要给vue一个标识，作为对比条件，这个标识必须是唯一的，所以一般使用id.

在脚手架中必须加上key，不然报错

<ul>
           <li v-for="(a,b) in people" :key="a.id">
               <h3>{{b}}姓名：{{a.name}}</h3>
               <p>金额：{{a.money}} <button v-on:click="add(b)">++</button> </p>
           </li>
       </ul>

5.事件处理

v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

6.表单修饰符 

<!-- .lazy 失去光标才修改模型数据，优化 -->
       <input type="text" v-model.lazy="name">

       <!-- .number 将绑定的数据 的数据类型转换为number -->
       <input type="text" v-model.number="age" v-on:blur="blur()">

       <!-- .trim 去空格 -->
       <input type="text" v-model.trim="name">

7.事件处理

事件修饰符，.stop .prevent .capture .self .once .passive

按键修饰符，:keyup.enter :keydown.down

按键码，.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right

系统修饰键，.ctrl .alt .shift .meta

鼠标按钮修饰符.left .right .middle，

新增：.exact 修饰符- 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<div id="app">
        <!--1. .prevent 阻止默认事件 -->
        <div class="box" @contextmenu.prevent="yj"></div>
        <!-- 案例 -->
        <input type="text" @keydown.38.prevent="up">
        
        <!--2 .stop 阻止事件传播 -->
        <div class="outer" @click="outerClick">
            <div class="inner" @click.stop="innerClick"></div>
        </div>
        <!-- 案例 -->
        <button @click="isshow=true">删除</button>
        <div class="mask" v-if="isshow" @click="isshow=false">
            <div class="con" @click.stop="conClick()">
                <h3>你确定要删除吗？</h3>
                <button @click="isshow=false">取消</button>
                <button>确定</button>
            </div>
        </div>

        <!-- 3. .self 触发的目标元素是自身，才执行 -->
        <button @click="isshow2=true">删除2</button>
        <div class="mask" v-if="isshow2" @click.self="isshow2=false">
            <div class="con" >
                <h3>你确定要删除吗2？</h3>
                <button @click="isshow2=false">取消</button>
                <button>确定</button>
            </div>
        </div>

        <!--4 .left .right .up .down .enter .13   -->
        <input type="text" 
        @keydown.up="up2"
        @keydown.down="down"
        @keydown.enter="enter"
        @keydown.left.prevent="left"
        @keydown.right="right"
        >

        <!--5 .capture 捕获 -->
        <div class="outer" @click.capture.stop="outerClick">
            <div class="inner" @click.capture="innerClick">捕获</div>
        </div>

        <!-- 6. .native 解决组件绑定不上事件 -->
       <hello @click.native="outerClick"></hello>
       
       <!-- 新增：7.点击事件将只会触发一次 -->
		<a v-on:click.once="yj"></a>

    </div>
    <script>
        new Vue({
            el: "#app",//挂载点
            data: {//属性
                isshow:false,
                isshow2:false
            },
            methods: {//方法
                yj() {
                    console.log("右键了");
                },
                outerClick() {
                    console.log("outer click");
                },
                innerClick() {
                    console.log("inner click");
                },
                up() {
                    console.log("按了上键");
                },
                conClick(){},
                up2(){
                    console.log("上键");
                },
                down(){
                    console.log("下键");
                },
                enter(){
                    window.open("http://baidu.com")
                },
                left(){
                    console.log("left");
                },
                right(){
                    console.log("right");
                },
            }
        })
    </script>

6.MVVM模式

适用：大量的数据增删改查的操作

M-model 模型 V-view 视图 VM-viewModel 视图模型 (控制器)

模型通过控制器决定了视图，

视图可以通过控制器修改模型，

视图模型是模型和视图之前的桥梁。

总结：常用指令

表单元素：v-model

非表单元素： {{}} v-html v-text

属性绑定：v-bind=》： v-on=》@

条件渲染：v-if v-else v-show

列表渲染：v-for

vue指令系统 vue事件处理 前端 vue html
上一篇: [Branch Prediction]处理器分支预测文献笔记(1)
下一篇: Linux查看进程文件绝对路径

继续阅读