vue，，

最新推荐文章于 2024-09-13 14:34:15 发布
hmt13657
最新推荐文章于 2024-09-13 14:34:15 发布
阅读量327
点赞数 4
文章标签： vue.js 前端 javascript
本文链接：https://blog.csdn.net/hmt13657/article/details/136617033
版权
本文详细介绍了Vue.js中的模板语法、数据绑定方法（如v-bind,v-if,v-for,v-show等）、组件应用以及指令的使用，包括单向和双向数据绑定，动态绑定属性和事件处理。适合初学者和进阶者了解和实践Vue的动态内容控制。
摘要由CSDN通过智能技术生成
<!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;
        }
        .box2{
            font-size: 50px;
            color: red;
        }
        .box3{
            font-size: 30px;
            color: pink;
        }
        [v-cloak]{
            display: none;
        }
        /* v-cloak 解决网速慢展示插值|页面出现闪烁或白屏，
        使用需要给标签添加v-cloak,还需要添加上面代码*/
    </style>
</head>
<body>
     <!-- 容器 ，app容器名称-->
    <!-- 注：容器名称尽量使用id绑定唯一值 -->
    <div id="app">
        <!-- {{}}插值语法 -->
        {{ message }}---
        <h1>
            {{names}}
        </h1>
    </div>
    <div id="abc" class="box1">
        {{ message }}
    </div>
    <!-- 1.容器 -->
    <div id="app">
        <!-- 插值 -->
        {{a+b}}---{{c+d}}---{{e+f}}----{{c>9?1:2}}---------{{g(99)}}
    </div>
    <div id="ips">
        {{userName}}
        <div>
            <a href="http://www.baidu.com">访问百度</a>
            <!-- v-bind:动态绑定属性 -->
            <a v-bind:href="abc" v-bind:class="a">vue方法访问vue官网</a>
        </div>
    </div>
    <div id="app">
        {{userName}}----{{this.userName}}
        <!-- 绑定元素名称使用v-bind:属性名 == :属性名 -->
        <a v-bind:href="http">访问链接</a>
        <a :href="https">访问链接</a>
        <h1>{{func()}}</h1>
        <!-- 绑定事件
        v-on:事件 == @事件 
        注：事件名称一定不要加on-->
        <button v-on:click="func1(1)">点击1</button>
        <button @click="func1(2)">点击2</button>
        <h1 :class="sty">我现在点击的是{{num}}</h1>
        <h1 :style="boss[0]">绑定样式style</h1>
    </div>
    <div id="app">
        {{a}}
        <button @click="func(1)">点击1</button>
        <button @click="func(2)">点击2</button>
        <button @click="sum()">点击3</button>
        <h1 :class="cla" :style="sty">我是一段文本</h1>
        <!-- v-for用于遍历数组，对象，字符串，指定次数
        注：:key="需要唯一" -->
        <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>
        <h1 v-for="(item,index) of arrs" :key="item.sclNum">
            <!-- {{arrs[index]}}-------- -->
            {{item}}-----{{item.userName}}-------{{item.age}}-----{{index}}
        </h1>
        <h1 v-for="(item,index) of str" :key="index+item">
            {{item}}
        </h1>
        <h1 v-for="(item,index) of 5" :key="item">
            {{item}}
        </h1>
        <hr>
        <!-- <h1 v-for="(item,index) of arrays" :key="index+item">
            {{item}}------{{index}}
            
            <p v-for="(itemx,index) of item" :key="itemx+index" style="color: orange;">
                {{itemx}}
            </p>
        </h1> -->
        <h1 v-if="x">我是一段文本1111</h1>
        <h1 v-if="y">我是一段文本2222</h1>
        <h1 v-if="arr.length>0">9999999</h1>
        <h1 v-if="z>90">00000000</h1>
    </div>
    <div id="app" style="height: 2000px;">
        <h1 v-cloak>{{x}}</h1>
        <div v-for="(item,index) of arr" :key="index+item">{{item}}</div>
        <div v-for="(item,index) of obj" :key="index+item">{{item}}</div>
        <div v-for="(item,index) of arrays" :key="index+item+a">
            <!-- {{item}} -->
            <div v-if="Array.isArray(item)">
                <h1 v-for="(items,index) of item" :key="index+items">
                    {{items}}
                </h1>
            </div>
            <h1 v-else style="color:red">
                {{item}}
            </h1>
        </div>
        <!-- v-if判断|显示隐藏 -->
        <h1 v-if="b">11111</h1>
        <h1 v-if="c">22222</h1>
        <!-- v-if和v-show区别
        1.相同的：都可以进行显示隐藏
        2.不同点：v-if存在或不存在，v-show展示或不展示
        3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗
        多次的显示隐藏推荐使用v-show
         -->
         <!-- v-if和v-for优先级和使用事项
        在vue2中v-for比v-if优先级高
        在vue3中v-if比v-for优先级高
        v-if和v-for在vue2或vue3中都不要同时使用，
        如果需要使用在外层先使用判断，在进行循环 -->
        <h1 v-show="d">33333</h1>
        <h1 v-show="e">44444</h1>
        <h1 v-show="arr.length>0">555555</h1>
        
        <!-- v-else，v-else-if -->
        <!-- 注：v-else，v-else-if不能单独使用，要跟if一起使用 -->
        <h2 v-if="x==1">我是测试文本111</h2>
        <h2 v-else-if="x==2">我是测试文本222</h2>
        <h2 v-else>我是测试文本333</h2>
        <!-- v-else,v-cloak,v-once，v-pre不需要带值 -->
        <!-- v-bind:或:,v-on:或@,v-for,v-if,v-show,v-model
        v-else,v-else-if,v-text,v-html,v-cloak,v-once,v-pre, -->
        <!-- v-text和v-html，插值 区别 -->
        <!-- 1.相同点：v-text和v-html都会覆盖原本内容
        不同点：v-text文本，v-html标签
        插值会进行拼接 
        注：一定不要在用户提交时使用v-html-->
        <div v-text="txt">aaaaaaaa</div>
        <div v-html="txt">bbbbbbbb</div>
        <hr>
        <!-- v-once只加载一次，静态内容，因为不会修改值所以优化了性能 -->
        <button @click="func3()">点击</button>
        <h1 v-once>{{num}}</h1>
        <h1>{{num}}</h1>
        <!-- v-pre可以跳过插值或指令不加载 -->
        <h1 v-pre v-show="b">{{num}}</h1>
        
        <!-- v-bind:单向数据绑定,由data流行页面 -->
        <!-- v-model双向数据绑定，由data流向页面或页面(用户输入)流向data -->
        <input type="text" :value="nums">
        <input type="text" v-model="nums">
        <button @click="func5()">点击</button>
        <hr>
        <table border="1" width="100%" cellspacing="0">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </table>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    // 阻止VUE在启动时产生的提示
    Vue.config.productionTip = false;
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            names:"张三"
        }
    })
    var aaa = new Vue({
        // el绑定容器
        el: '.box1',
        data: {
            message: '计应1班第一天上vue'
        }
    })
    // 清除启动时产生的提示
    Vue.config.productionTip = false;
    var vm = new Vue({
        // data中装的是定义的变量，跟插值对应
        // 1.data:{}对象式
        // 2.data(){return{}}函数式,注：搭建脚手架（vue-cli）后,一定要使用函数式
        // 注：不可以使用箭头函数
        // data:{
        //     userName:"李四",
        //     a:""
        // },
        // data:function(){
        //     return{
        //         userName:"赵六"
        //     }
        // },
        data() {
            return {
                userName:"王五",
                abc:"https://v2.cn.vuejs.org/v2/guide/syntax.html",
                a:"box1"
            }
        },
        
    })
    vm.$mount("#ips");
    // 绑定容器的2种方式
    // 1.el绑定:"容器id或class等"
    // 2.Vue实例.$mount("容器id或class等"),注：一定写在最后
    // 创建vue实例
    var app = new Vue({
        el:"#app",
        data:{
            a:"我是张三",
            b:"我今年18岁",
            c:10,
            d:20,
            e:[1,2,3],
            f:[4,5,6],
            g(x){
                return x;
            }
        }
    })
    Vue.config.productionTip = false;
    var userName = "李四";
    var vm = new Vue({
        // el:"#app",
        data(){
            return{
                userName:"张三",
                http:"http://www.baidu.com",
                https:"https://v2.cn.vuejs.org/v2/api/#methods",
                num:"",
                sty:"",
                // boss:"border:5px solid orange;color:green;"
                // boss:{
                //     border:"5px solid orange",
                //     color:"pink",
                //     // textAlign:"center"
                //     "text-align":"right"
                // }
                boss:[
                    {
                        border:"5px solid pink"
                    },
                    {
                        color:"red"
                    }
                ]
            }
        },
        // methods处理的函数方法
        methods: {
            func(){
                console.log(1111111);
                return 1111111;
            },
            func1:function(user){
                if(user==1){
                    this.num = 1;
                    this.sty = "box1";
                    console.log(222222222);
                }else {
                    this.num = 2;
                    this.sty = "box2"
                    console.log(333333333);
                }
            },
            // func1:()=>{
            //     console.log(111111111);
            //     console.log(this);
            //     console.log(this.userName);
                // this.num = 1;
                // this.sty = "box1";
                // console.log(222222222);
            // },
            func2(){
                this.num = 2;
                this.sty = "box2"
                console.log(333333333);
            }
        },
    })
    vm.$mount("#app");
    Vue.config.productionTip = false;
    var vm = new Vue({
        data() {
            return {
                x:true,
                y:false,
                z:99,
                a:"123",
                cla:"",
                sty:[],
                obj:{},
                arr:[11,22,33,44,55],
                objs:{
                    userName:"张三",
                    age:18,
                    sex:"男",
                    sclNum:202201
                },
                arrs:[
                    {
                        userName:"张三",
                        age:18,
                        sex:"男",
                        sclNum:202201
                    },
                    {
                        userName:"李四",
                        age:20,
                        sex:"女",
                        sclNum:202202
                    }
                ],
                str:"hello word",
                arrays:["第一个",["第二个","第三个","第四个"],"第五个",["第六个","第七个"],"第八个"]
            }
        },
        methods: {
            func(user){
                if(user==1){
                    this.cla = "box1";
                    // this.sty.color = "red";
                    this.obj = {
                        "font-size":"50px",
                        textAlign:"center"
                    }
                    this.sty.push(this.obj);
                }else{
                    this.cla = "box2";
                    // this.sty.color = "pink";
                    this.obj = {
                        color:"pink",
                        "font-size":"30px",
                    }
                    this.sty.push(this.obj);
                }
            },
            sum(){
                console.log(this.sty);
            }
        },
    }).$mount("#app");
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                arrsss:[
                    {
                        userName:"张三",
                        age:18,
                        sex:"男"
                    },
                    {
                        userName:"李四",
                        age:20,
                        sex:"女"
                    },
                ],
                nums:"我是测试文本",
                txt:"<h1>我是h1标签</h1>",
                x:"kjdsajkashdjkshdjkash ",
                b:false,
                c:true,
                d:false,
                e:true,
                a:"a",
                arr:[11,22,33,44],
                obj:{
                    id:202201,
                    name:"zs",
                    age:"男"
                },
                arrs:[11,[22,33],44,[55,66,77],88],
                arrays:["第一个",["第二个","第三个","第四个"],"第五个",["第六个","第七个"],"第八个"],
                num:0
                
            }
        },
        methods: {
            func3(){
                this.num++;
            },
            func5(){
                console.log(this.nums);
            }
        },
    })
</script>
</html>