VUE2.0基本语法

最新推荐文章于 2023-11-22 09:49:26 发布

步入飞花

最新推荐文章于 2023-11-22 09:49:26 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42646178/article/details/119728174

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.基本语法

1.1v-if、v-show、v-else

v-if: 满足条件则进入
v-show: 控制元素是否显示、css的display
v-else: v-if取反

     <div id="div1">
         <di v-if="ok">
             v-if是true
             <p v-show="no">
                v-show是true
             </p>
             <div v-else>
                v-else是true
            </div>
         </div>
     </div>
     <script>
         var vue = new Vue({
            el: '#div1',
            data: {
                ok: true,
                no: false
            }
         });
     </script>

分析：data的值ok设置为TRUE所以会显示v-if是true并且v-else的内容也不会显示,data的值ok设置为FALSE，不会显示v-show是true
在这里插入图片描述

1.2v-for

循环显示物理分数排行榜和国家人口排行榜并且排序。

<div id="app">
        物理分数排行榜
        <ol>
            <li v-for="temp in rankscore">{{temp}}分</li>
        </ol>
        国家人口排行榜
        <ol>
            <li v-for="(obj,num) in rankcountry">{{obj.name}},{{obj.num}}亿</li>
        </ol>
    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                score: [90, 20, 80, 77, 100, 99, 67, 88, 45],
                country: [
                    { name: '中国', num: 13.9 },
                    { name: '印度', num: 10 },
                    { name: '美国', num: 4 },
                    { name: '日本', num: 1.5 }
                ]
            },
            // 在数据渲染时会先处理
            computed: {
                rankscore: function () {
                    return this.score.sort(sortNumber)//当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。
                },
                rankcountry: function () {
                    return this.country.sort(rankCuntryNum)//对国家的人口数进行排序
                }
            }
        });

        function sortNumber(a, b) {
            return b - a;
        }

        function rankCuntryNum(a, b) {
            return b.num - a.num;
        }
    </script>

在这里插入图片描述
分析：使用data生成国家人口和物理分数的数据，computed属性使用sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序，最后使用v-for循环遍历两个数组

1.3v-text、v-html

v-text:输出文本内容 v-html:输出html元素和文本内容

    <!-- v-text:输出文本内容 v-html:输出html元素和文本内容 -->
    <div id="app">
        <span v-text="messenge"></span>
        <span v-html="messengeHtml"></span>
    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                messenge: '普通文本',
                messengeHtml: '<h1>标题文本</h1>'
            }
        });
    </script>

在这里插入图片描述

1.4v-on

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

    <div id="app">
        <span v-text="a"></span>
        <button v-on:click="add">add</button>
        <button @click='sub'>sub</button>
    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                a: 1
            },
            methods: {
                add:function(){
                    this.a ++
                },
                sub:function(){
                    this.a --
                }
            }
        });
    </script>

分析:通过v-on绑定增加和删除方法从而实现对数据a的增加和删除操作
在这里插入图片描述

1.5v-model

数据双向绑定

v-mode.lazy: 懒加载：改变数据，等用户焦点离开输入框才会改变值
v-mode.number: 如果输入框刚好是数字的话那么值得类型就会是Nmber类型
v-mode.trim: 自动去除前面的空格

<!-- 双向绑定 -->
<p>v-model:<input type="text" v-model='messenge'></p>
<p>v-mode.lazy:<input type="text" v-model.lazy="messenge"></p> 
<!-- 懒加载：改变数据，等用户焦点离开输入框才会改变值 -->
<p>v-mode.number:<input type="text" v-model.number="messenge"></p> 
<!-- 如果输入框刚好是数字的话那么值得类型就会是Nmber类型 -->
<p>v-mode.trim:<input type="text" v-model.trim="messenge"></p>

在这里插入图片描述
单选按钮的使用

<label for="单选按钮">单选按钮</label><input type="checkbox" v-model="checkbox">

在这里插入图片描述
多个checkbox标签和数组绑定

<h3>多个checkbox和数组绑定</h3>
<label>语文</label><input type="checkbox" value='语文' v-model="checkboxArr">
<label>数学</label><input type="checkbox" value='数学' v-model="checkboxArr">
<label>英语</label><input type="checkbox" value='英语' v-model="checkboxArr">
<label>选课结果：</label>{{checkboxArr}}

var vue = new Vue({
    el: '#p',
    data: {
        messenge: 'hello vue',
        checkbox: false,
        // 和checkbox绑定
        checkboxArr: [],
        student: []
    }, 
    updated() {
        console.log("updated" + typeof this.message)
    },   
});

分析：通过v-model将多个checkbox和checkboxArr数组绑定，选中checkbox的选项将在右侧显示出来
在这里插入图片描述
select标签显示多个option
原理同上个例子一样，需要将select标签添加multiple属性

        <select v-model='student' name='studentName' multiple>
            <!-- <option v-for='temp in student'>{{temp}}</option> -->
            <option value="zhangsan">zhangsan</option>
            <option value="lisi">lisi</option>
            <option value="wangwu">wangwu</option>
            <option value="libai">libai</option>
        </select>
        <label>选择结果：</label>{{student}}

var vue = new Vue({
    el: '#p',
    data: {
        messenge: 'hello vue',
        checkbox: false,
        // 和checkbox绑定
        checkboxArr: [],
        student: []
    }, 
    updated() {
        console.log("updated" + typeof this.message)
    },   
});

在这里插入图片描述

1.6v-bind

v-bind就是用于绑定数据和元素的属性，:是v-bind的简写

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07_v-bind</title>
    <script src="./assets/js/vue.js"></script>
    <style>
        .classA {
            color: red;
        } 
        .classB {
            font-size: 20px;
        } 
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind就是用于绑定数据和元素属性的 -->
        <h1>v-bind</h1>
        <!-- :是v-bind的简写 -->
        <img v-bind:src="imgSrc" alt="" :width="width">
        <div>样式：classA:颜色变红，classB：字体变大</div>
        <div :class='classA'>1.绑定class样式</div>
        <div :class='{classA:displayFlag}'>2.通过判断绑定class样式</div>
        <div :class='[classA,classB]'>3.使用数组绑定class样式</div>
        <div :class='[displayFlag?classA:classB]'>4.使用三元表达式绑定class样式</div>
        <div :class='[{displayFlag:classB},classA]'>5.使用判断组合绑定class样式</div>
        <hr>
        <div :style="{color: green, fontSize: font}">6.style绑定</div>
        <div :style="styleArr">7.style绑定json语句</div>
    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                imgSrc: 'https://img1.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto&gp=0.jpg',
                width: 200,
                classA: 'classA',
                classB: 'classB',
                displayFlag: false,
                green: 'green',
                font: '22px',
                styleArr: {
                    color: 'red', 
                    fontSize: '22px'
                }
            }
        });
    </script>
</body>
</html>

分析：img元素通过v-bind:src设置了图片的路径，有两个样式，classA:颜色变红，classB：字体变大
在这里插入图片描述

1.7Vue.directive自定义指令

案例：聚焦输入框，当页面加载时，该元素将获得焦点

<body>
    <div id="app">
        <input v-focus>
    </div>
    <script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
        }
    });
    </script>
</body>

在这里插入图片描述
也可以使用局部自定义指令，效果也是一样

<body>
    <div id="app">
        <input v-focus>
    </div>
    <script>
    // 注册一个全局自定义指令 `v-focus`
    // Vue.directive('focus', {
    //     // 当被绑定的元素插入到 DOM 中时……
    //     inserted: function (el) {
    //         // 聚焦元素
    //         el.focus()
    //     }
    // })
    var vm = new Vue({
        el: '#app',
        data: {
            
        },
        // 注册一个局部自定义指令 `v-focus`
        directives: {
            focus: {
                inserted: function(el) {
                    el.focus()
                }
            }
        }
    });
    </script>

自定义指令的钩子函数

bind：指令第一次绑定到元素时调用，只执行一次。在这里可以进行一次性的初始化设置。
inserted：被绑定的元素，插入到父节点的 DOM 中时调用（仅保证父节点存在）。
update：组件更新时调用。
componentUpdated：组件与子组件更新时调用。
unbind：指令与元素解绑时调用，只执行一次。

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和componentUpdated钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
- arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为 “foo”。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：vue编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在 update 和componentUpdated钩子中可用。

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08_自定义指令</title>
    <script src="./assets/js/vue.js"></script>
</head>
<body>
    <h1>Vue.directive自定义指令</h1>
    <div id="app">
        <p v-wos="color">{{num}}</p>
        <input type="button" value="add" v-on:click="addNum">
        <input type="button" value="解绑" onclick="xiezai()">
    </div>
    <script>
        Vue.directive('wos', {
            bind:function(el, binding, vnode){//被绑定
                console.log("1--bind")
                console.log(el)
                console.log(binding)
                console.log(vnode)
            },
            inserted:function(){//绑定到节点
                console.log("2--inserted")
            },
            update:function(el, binding, vnode){//组件更新
                console.log("3--update")
                //更新颜色
                el.style.color=binding.value;
            },
            componentUpdated:function(){//组件更新完成
                console.log("4--componentUpdated")
            },
            unbind:function(){//解绑
                console.log("5--unbind")
            }
        });

        var vue = new Vue({
            el: '#app',
            data: {
                num: 1,
                color: 'red'
            },
            methods: {
                addNum:function(){
                    this.num ++
                } 
            } 
        });

                //解绑
        function xiezai(){
            vue.$destroy();
        }
    </script>
</body>
</html>

页面加载完成时，调用了bind和inserted函数
在这里插入图片描述
点击add按钮调用addNum方法，这时数据发生改变update和componentUpdated函数被调用

点击解绑时，调用了unbind函数

1.8Vue.extend

vue官方解释：使用基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象。
案例：新建头部和尾部信息，通过关键字$mount挂载到ID选择器为header和footer元素上

<body>
    <div id="header"></div>
    <div id="footer"></div>
    <script>
    var header = Vue.extend({
        template: '<h1>{{message}}</h1>',
        data:function(){
            return {
                message: '头部信息'
            }
        }
    });

    var footer = Vue.extend({
        template: '<h1>{{message}}</h1>',
        data:function(){
            return {
                message: '尾部信息'
            }
        }
    });

    new header().$mount('#header');
    new footer().$mount('#footer');
    </script>
</body>