vue的入门(附带测试源码)

﹏ヽ暗。殇╰゛Y 2022-03-28 11:42 152阅读 0赞

## 建议配合演示源码进行观看 ##

[源码下载][Link 1]  
码字不易,望赞表挺.

### Vue 的第一个实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue的基本代码 </title>
        <script src="../lib/Vue2.5.21.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{
       {msg}}</p>
        </div>
    
        <script> new Vue({ el: '#app', data:{ msg:"你好世界!" } }) </script>
    </body>
    </html>

#### 基本使用 ####

*  导入Vue文件
 *  创建Vue实例
 *  Vue的el属性关联要控制的区域
 *  接下来可以做渲染,等等之类的操作

### V-cloak ###

在网速慢的环境下,插值表达式会显示为\{ \{\}\}

v-cloak能够解决插值表达式的闪烁问题

### v-text,v-html和插值表达式 ###

三者都是用来渲染文本

##### v-text和插值表达式的区别: #####

*  默认v-text是没有闪烁问题的
 *  v-text会把元素内的内容覆盖,插值表达式只会替换自己的占位符
 *  v-text和\{ \{\}\}会把内容当作普通文本来渲染,v-html会作为htm来渲染

### v-bind ###

专门用来绑定属性的指令

##### 注意 #####

*  v-bind 可以简写为一个冒号
 *  v-bind中可以写合法的js表达式

### v-on ###

##### 作用 #####

vue中提供的事件绑定机制

##### 基本使用 #####

<div id="app">
       
        <button v-on:click="show">按钮</button>
        
    	<button @click="show">按钮</button>
    </div>
    
    <script> new Vue({ el: '#app', data:{ link: "http://www.baidu.com/" }, //methods 中定义了当前vue实例中所有可用的方法 methods:{ show:function () { alert(1); } } }) </script>

##### 配合事件修饰符使用 #####

共有五个

*  stop-----阻止冒泡
 *  capture-----开启事件捕获
 *  self-----只有点击自身的时候才会触发事件
 *  once-----事件有效期只有一次
 *  prevent-----阻止默认行为

### v-model ###

##### 作用 #####

主要用于表单元素和vm实例数据的双向绑定 **只能用于表单元素**

**与V-bind的不同**

只能实现数据的单向绑定,从m绑定到v,无法实现数据的双向绑定

##### 基本使用 #####

<div id="app">
            <h4>{
       {msg}}</h4>
            <input type="text" v-model="msg">
        </div>
        <script> var vm = new Vue({ el: "#app", data:{ msg:"测试文本" }, methods:{ } }) </script>

### Vue绑定类 ###

可以通过四种方式来进行属性绑定

*  数组形式
 *  三元表达式
 *  数组嵌套对象
 *  直接使用对象的方式

<div id="app">
        
        
        <h1 :class="['thin','italic']">测试文本</h1>
    
        
        <h1 :class="['thin','italic',flag?'active':'']">测试文本</h1>
    
        
        <h1 :class="['thin','italic',{ 'red':flag}]">测试文本</h1>
    
        
        <h1 :class="classObj">测试文本</h1>
    
    </div>
    <script> var vm = new Vue({ el: "#app", data: { flag: true, classObj: { red: true, thin: true, italic: false, active: false} }, methods: { } }) </script>

### Vue绑定样式 ###

*  给style绑定对象
 *  把对象抽离到data中
 *  通过数组绑定多个对象

<h1 :style="{ color:'red','font-size':'40px'}">测试文本</h1>
    
        
        <h1 :style="styleObj">测试文本</h1>
    
        
        <h1 :style="[styleObj,styleObj2]">测试文本</h1>
    
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj: {color: 'red', 'font-size': '40px'},
                styleObj2: {fontWeight:200}
            },
            methods: {}
        })

### V-for的使用 ###

四种用法

*  遍历普通数组
 *  遍历对象数组
 *  遍历对象的属性
 *  迭代数字

<div id="app">
            
            
    
            
            
    
            
            
    
            
            
        </div>
        <script> var vm = new Vue({ el: "#app", data:{ list:[1,2,3,4,6,8],//普通数组 listObj:[ { id:1, name: 'zz1'}, { id:2, name: 'zz2'}, { id:3, name: 'zz3'}, { id:4, name: 'zz4'}, ], obj:{ id: 1, name: "你的托尼老师", gender: "男" } }, methods:{ } }) </script>

##### 注意:key的使用 #####

:key是确保元素唯一性,在新版本中必要添加 key的属性只能使用num/string

--------------------

### V-if和V-show的使用 ###

##### 作用: #####

都是用来显示和隐藏元素的

##### 区别: #####

v-if:会对元素进行删除和创建, 有较高的切换性能消耗

v-show:会对元素进行display属性的切换,有较高的初始渲染消耗

##### 使用建议 #####

如果元素涉及到频繁的切换,最好不要使用v-if

如果元素可能永远不会被显示出来,则推荐使用v-if

##### 演示 #####

<div id="app">
            <input type="button" @click="toggle" value="toggle">
            
            <h3 v-if="flag">v-if控制的元素</h3>
            
            <h3 v-show="flag">v-show控制的元素</h3>
        </div>
        <script>
            var vm = new Vue({ 
                el: "#app",
                data:{ 
                    flag: true
                },
                methods:{ 
                    toggle() { 
                        this.flag = !this.flag;
                    }
                }
            })
        </script>

--------------------

### Vue中的过滤器 ###

##### 作用: #####

一般用来格式化文本,可以作用在差值表达式(mustachc)和v-bind表达式’’

##### 私有过滤器: #####

绑定在vue实例上的过滤器,只能作用于本实例.

如果出现私有过滤器和全局过滤器同名,优先使用私有过滤器

##### 全局过滤器 #####

绑定在Vue对象上,可以作用于任意一个实例

##### 全局过滤器演示: #####

<div id="app">
            
            { {  date | dateFormat()}}
        </div>
        <script>
    
            // 全局过滤器的定义
            //过滤器中的function,第一个参数已经被规定死了,永远都是过滤器管道符前面传递过来的数据
            //这是自定义了一个格式化日期的过滤器
            Vue.filter("dateFormat",function (data,pattern='') { 
                var dt = new Date(data);
                var y = dt.getFullYear();
                var m = dt.getMonth()+1;
                var d = dt.getDate();
    
                if (pattern.toLowerCase() === "yyyy-mm-dd") { 
                    return `${ y}-${ m}-${ d}`;
                } else { 
                    var hh = dt.getHours();
                    var mm = dt.getMinutes();
                    var ss = dt.getSeconds();
                    return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}`;
                }
            })
    
            var vm = new Vue({ 
                el: "#app",
                data:{ 
                    date: new Date(),
                },
                methods:{ 
    
                }
            })
        </script>

##### 局部过滤器演示: #####

<div id="app">
        
        { {  date | dateFormat()}}
    </div>
    <script>
        var vm = new Vue({ 
            el: "#app",
            data:{ 
                date: new Date(),
            },
            methods:{ 
    
            },
            // 局部过滤器的定义
            //过滤器中的function,第一个参数已经被规定死了,永远都是过滤器管道符前面传递过来的数据
            //这是自定义了一个格式化日期的过滤器
            //如果出现私有过滤器和全局过滤器同名,优先使用私有过滤器
            filters:{ 
                dateFormat(data,pattern="") { 
                    var dt = new Date(data);
                    var y = dt.getFullYear();
                    var m = dt.getMonth()+1;
                    var d = dt.getDate();
    
                    if (pattern.toLowerCase() === "yyyy-mm-dd") { 
                        return `${ y}-${ m}-${ d}`;
                    } else { 
                        var hh = dt.getHours();
                        var mm = dt.getMinutes();
                        var ss = dt.getSeconds();
                        return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}`;
                    }
                }
            }
        })
    </script>

--------------------

### 自定义按键修饰符 ###