Vue简介及基本指令

Posted 2022-01-27 遥岑.

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue简介及基本指令相关的知识，希望对你有一定的参考价值。

Vue概述

vue简介

Vue.js可以说是MVVM 架构的最佳实践，是一个javascript MVVM库，是一套构建用户界面的渐进式框架。
专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁。

vue的特点

数据驱动视图：数据的变化会驱动视图自动更新，数据驱动视图是单向的数据绑定。
双向数据绑定：数据的变化会被自动渲染到页面上，页面上采集的数据发生变化时会被vue自动获取到并更新到js数据中。

MVVM模式

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。
MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来；ViewModel 是一个同步View 和 Model的对象。
ViewModel作为MVVM的核心，是它把当前页面的数据源Model和页面的结构View连接在了一起。当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构；当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model数据源中。

Vue指令

渲染数据

vue使用了基于 html 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用Mustache语法 (双大括号) 的文本插值。

<div id="app">
   <p> msg </p>
   <p> 8+2 </p>
   <p> 10>5</p>
</div>
		
<script>
	new Vue( //创建Vue对象
		el: '#app', //Vue对象的属性，用来与DOM绑定
		data:    //Vue对象的属性(对象)，用来给定对象的数据
			msg: '长安'
		
	)
</script>

Vue的指令

vue的指令：是带有v-前缀的特殊属性，通过属性来操作元素。

v-show：根据表达式的真假值来显示和隐藏元素

<div id="app">
    <p>遥岑</p>
    <p v-show='temp'>仅以遥岑敬钱塘</p>
    <p v-show='ok'>人可曾记此记</p>
</div>

<script type="text/javascript">
    var vm = new Vue(
        el:'#app',
        data:
            temp:false,
            ok:true
        
     )

    window.setInterval(function()
        vm.ok = !vm.ok
    ,1000)

v-html：插入标签

<div id="app">
     <label><input type="checkbox" @click='qita'>芒果</label>       
     <input type="checkbox">橘子
     <input type="checkbox">葡萄
     <div v-html='htmlStr' v-show='test'></div>
</div>

<script>
     new Vue(
         el:'#app',
         data:
             //插入标签
             htmlStr:'<textarea></textarea>',
             test:false
         ,
         //vue对象的属性：方法的定义
         methods:
             qita:function() 
                 this.test = !this.test
             
          
     )
</script>

v-text：给元素插入值

<div id='add'>
	<div v-text='test'></div>
</div>

<script>
	new Vue(
		el:'#add',
		data:
			test:'遥岑'
		
	)
</script>

v-if、v-else-if、v-else：根据条件动态的插入和删除元素

<div id="app">
     <div v-if='rule=="shanshan"'>老秦</div>
     <div v-else-if='rule=="long"'>秦</div>
     <div v-else>哎</div>
</div>

<script>
     new Vue(
         el:'#app',
         data:
             rule:'long'
         
     )
</script>

v-if和v-show的区别：
v-if显示隐藏是将dom元素整个添加或删除；v-show隐藏是为该元素添加css样式display:none，dom元素依旧还在
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，只有渲染条件为假时，并不做操作，直到为真才渲染
v-if有更高的切换消耗；v-show有更高的初始渲染消耗

v-for：循环渲染元素

<body>
    <div class="app">
        <ul>
            <!-- arr是数组名 item是临时变量 -->
            <li v-for='(item,index) in arr'>index:item</li>
        </ul>
        <ul>
            <!-- 括号里面的顺序是固定的 -->
            <li v-for='(item,key,index) in obj'>index:key:item</li>
        </ul>
        <ul>
            <li v-for='item in obj2'>
                item.name
                item.age
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue(
            el:'.app',
            data:
                arr:[12,5,1,2,3,6],
                obj:
                    a:'遥岑',
                    b:'路知许',
                    c:'江絮'
                ,
                obj2:[
                    
                        name:'遥岑',
                        age:20
                    ,
                    
                        name:'知许',
                        age:26
                    ,
                    
                        name:'宋猗',
                        age:27
                    
                ]
            
        )
    </script>
</body>

v-bind：绑定元素的属性并执行相应的操作(将元素的属性和变量绑定在一起)，可以简写为 :(必须放在属性名前)

<body>
    <div id="app">
        <a v-bind:href="link" v-bind:class='active:isActive'>
            百度
        </a>
    </div>

    <script>
        new Vue(
            el:'#app',
            data:
                link:'https://www.baidu.com',
                isActive:true
            
        )
    </script>
</body>

v-on：==监听事件(绑定事件)==并执行相应的操作，绑定单个事件的简写：@事件名=“事件响应函数”

<body>
    <div id="app">
        <button  v-on:click='myClick'>提交</button>
        <br>
        <button v-on='
            click:myClick,
            mouseenter:mouseEnter,
            mouseleave:mouseLeave
        '>
            绑定多个事件
        </button>
    </div>

    <script>
        new Vue(
            el:'#app',
            methods:
                myClick:function() 
                    console.log('仅以遥岑敬钱塘')
                ,
                mouseEnter:function() 
                    console.log('鼠标进入')
                ,
                mouseLeave:function() 
                    console.log('鼠标离开')
                
            
        )
    </script>
</body>

v-model：将input的值与变量进行绑定,实现数据和视图的双向绑定

<body>
    <div id="app">
        <label>
            <input type="radio" value="男" name="sex" v-model='gender'>男
        </label>
        <label>
            <input type="radio" value="女" name="sex" v-model='gender'>女
        </label>
        <br>
        <p>性别是： gender </p>
        <hr>
        
        <label>
            <input type="checkbox" value="芒果" name="eat" v-model='eat'>芒果
        </label>
        <label>
            <input type="checkbox" value="火锅" name="eat" v-model='eat'>火锅
        </label>
        <label>
            <input type="checkbox" value="烤肉" name="eat" v-model='eat'>烤肉
        </label>
        <br>
        <p>food: eat </p>
    </div>

    <script>
        new Vue(
            el:'#app',
            data:
                gender:'',
                eat:[]
            
        )
    </script>
</body>

v-once：只绑定一次(只渲染一次)

<body>
    <div id="app">
        <input type="text" placeholder="输入字符串" v-model="content">
        <p>content</p>
        //只绑定一次 后面数据改变视图也不改变
        <p v-once> content </p>
    </div>
    
    <script>
        new Vue(
            el:'#app',
            data:
                content:'初始值'
            
        )
    </script>
</body>

v-pre：编译时跳过使用了该指令的元素及其子元素，提高编译速度

<body>
    <div id="app">
        <!-- 给没有绑定的加v-pre就不会在vue里找是否定义 提高编译速度 -->
        <h1 v-pre> message </h1>
    </div>
    
    <script>
        new Vue(
            el:'#app',
            data:
                message:'遥岑'
            
        )
    </script>
</body>

v-cloak：处理页面闪动，插值表达式存在闪动的问题，vue.js文件没有加载完成时，在页面上上会出现 message的字样，等到vue创建实例、编译模板时，DOM就会被替换掉，过程中屏幕上会出现闪动一下
v-cloak指令可以解决初始化慢而导致页面闪动的问题

<style>
   [v-cloak]
       display: none !important;
   
</style>

<body>
    <div id="app">
        <p v-cloak>message</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue(
            el:'#app',
            data:
                message:'lalala'
            
        )
    </script>
</body>

自定义指令

通过自定义指令，我们可以对DOM进行更多的底层操作，我们可以通过Vue.directive()或者directives:来定义指令。

<body>
    <div id="app">
        <p>自定义指令 页面载入时，input自动获得焦点</p>
        <input type="text" v-myfocus>
    </div>

    <script>
        //定义指令并注册为全局的,vue会在指令名称前自动加上v-
        // Vue.directive('myfocus',
        //     inserted: function(el) 
        //         //获得焦点的函数
        //         el.focus()
        //     
        // )

        new Vue(
            el:'#app', 
            directives:
                myfocus:
                    inserted:function(el) 
                        el.focus()
                    
                
            
        )
    </script>
</body>