内置指令

最新推荐文章于 2024-07-01 15:44:31 发布

chuyuni

最新推荐文章于 2024-07-01 15:44:31 发布

阅读量166

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/chuyuni/article/details/136791792

版权

1.v-bind：简写：（绑定元素属性）

数据由data流向页面（单向数据绑定）

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创建容器，通绑定id值 
    注：搭建脚手架（vue-cli）后只能出现一个容器-->
    <div id="app">
        <!-- {{}}  插值-->
        {{message}}
        <h1>
            <a href="http://www.baidu.com">访问百度</a>
            <!-- 指令
            1.绑定元素的属性 v-bind: -->
            <a v-bind:href="num">访问vue官网</a>
        </h1>
    </div>
    
</body>
<script src="../vue.js"></script>
<script>
    // vue启动时出现的提示,Vue.config.productionTip阻止启动提示
    Vue.config.productionTip = false;
    // 1.el:"容器名称，如id或class等"
    // 2.Vue实例.$mount("容器名称，如id或class等")
    // 注：$mount绑定方式一定放在实例最后
    var vm = new Vue({
    // el绑定创建的容器
        el:"#app",
        // 1.data:{}对象式
        // 2.data(){return{}}函数式
        // 注：不要使用箭头函数,搭建脚手架（vue-cli）后，必须使用函数式
        data() {
            return {
                 message:"Hello Word"
                num:"https://v2.cn.vuejs.org/v2/guide/instance.html"
            }
        },
    })
</script>
</html>

2.v-on 简写@（绑定事件监听）

绑定事件时不要再让事件有on关键字了

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            font-size: 50px;
            color: red;
        }
        .box2 {
            font-size: 30px;
            color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <a :href="aa">访问链接</a>
        <!--绑定事件   v-on:  ==  @
            v-on:事件类型   事件类型一定不要加on -->
        <button v-on:click="func()">点击</button>
        <button @click="func2()">点击2</button>
        <br>
        <button @click="btns(1)">改变样式1</button>
        <button @click="btns(2)">改变样式2</button>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        // el:"#app",
        data(){
            return{
                abc:"http://www.baidu.com",
                aa:"https://v2.cn.vuejs.org/v2/guide/",
                loca:"",
                btn:"",
            }
        },
        // methods存放函数方法
        // 注：尽量不要使用箭头函数，否则拿取不到data的数据
        // 注：函数名称不要与变量名称一致
        methods: {
            btns(user){
                if(user==1){
                    this.cla = "box1";
                }else{
                    this.cla = "box2";
                }
            },
            // 点击这个访问百度
            func(){
                console.log(11111111);
            },
            // 点击这个访问vue官网
            func2:function(){
                console.log(222222222);
            },
        },
    })
    vm.$mount("#app");
</script>
</html>

3.v-for指令（例表渲染）

通俗意思就是循环，可以遍历数组、对象、字符串、指定次数。

语法：

<li v-for="(item,index) of items " :key=" index "></li>

解释:(item,index) 是需要拿取的值，循环之后得到的值。

item 这个是值 index 这个是下标。

items是遍历的对象、数组、字符串、指定次数。

绑定的key值必须是唯一的值。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-for 遍历数组，对象，字符串，指定次数 -->
        <h1 v-for="(item,index) of arr" :key="index+item">
            {{item}}-----------{{index}}
        </h1>
        <hr>
        <h1 v-for="(item,index) of objs" :key="index">
            {{item}}---------{{index}}
        </h1>
        <hr>
        <h2 v-for="(item,index) of str" :key="index+item">
            {{item}}------{{index}}
        </h2>
        <hr>
        <h3 v-for="(item) of 5" :key="item">
            {{item}}
        </h3>
        <hr>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        data() {
            return {
                arr:[11,22,33,44,55],
                objs:{
                    userName:"张三",
                    age:18,
                    sex:"男"
                },
                str:"hello word",
            }
        },
        methods: {
         
        },
    }).$mount("#app");
    
</script>
</html>