Day64 vue入门

其他 2019-07-26 21:34:54 阅读次数: 0

博客参考地址请查询：https://www.cnblogs.com/Michael--chen/p/11246214.html

1.vue.js库的基本使用

 　　1.1 官方中文文档

　　　　中文：https://cn.vuejs.org/

　　　　 vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。 

　　　　例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的快速使用</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!--要想正常显示vue提供的数据，必须要放在vue对象控制标签里-->
    <h2>{{title}}</h2>
    <div id="app">
        <h2>{{title}}</h2>
        {{ message }}
        <p>{{num}}</p>
        <input type="text" v-model="num">
    </div>

    <script>
        // vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。
        var vm = new Vue({
            el: "#app",  // 设置vue对象控制的标签范围
            data: {     // vue要操作的数据
                "message": "hello world!",
                "title": "vue的快速使用",
                "num": 100,
            }
        })
    </script>
</body>
</html>
截图细分为：

小结：在上面的在表单中就行显示的时候是  v-model=“num”

1. vue的使用要从创建Vue对象开始
   var vm = new Vue();
   
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
   var vm = new Vue({
         el:"#app",
     data: {
             数据变量:"变量值",
             数据变量:"变量值",
             数据变量:"变量值",
         },
   });
   
   el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
   data: 保存vue.js中要显示到html页面的数据。
   
3. vue.js要控制器的内容外围，必须先通过id来设置。
  <div id="app">
      <h2>{{title}}</h2>
      {{message}}
  </div>

2.vue.js的M-V-VM思想

　　M-V-VM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

　　Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

　　View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

　　ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示p标签中就是vm对象自动完成的。

console.log(vm.$el)     # #app  vm对象可以控制的范围
console.log(vm.$data);  # vm对象要显示到页面中的数据
console.log(vm.$data.message);  # 访问data里面的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例

3.显示数据

 

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{{url}}</p>
    <div>{{text}}</div>
    <div v-html="text"></div>
    <input type="text" v-model="url">
    <div>num是{{num%2==0?'偶数':'奇数'}}</div>
    <div>num的下一个数字：{{num-0+1}}</div>
    <input type="text" v-model="num">
    <div>{{message.split("").reverse().join("")}}</div>
    <input type="text" v-model="message.split('').reverse().join('')">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: "http://www.luffycity.com",
            text: "<h2>我是h2标签</h2>",
            num: 100,
            message: "abcdef",
        }
    })
</script>

</body>
</html>
运行结果：

4. 常用指令

4.1 操作属性

格式： 

<标签名 :标签属性="data属性"></标签名>

4.2 绑定事件

有两种事件操作的写法，@事件名 和 v-on:事件名。

运行结果：

小结：

 

操作购物车商品的数量案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车商品数量的操作</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="app1">
    <button @click="sub">-</button>
    <!--        如果方法需要传参 就要加上括号 反之不需要-->
    <button @click="sub()">------</button>
    <p>{{num}}</p>
    <input type="text" v-model="num" size="1">
    <button @click="add">+</button>
</div>
<script>
    var vm = new Vue({
        el: "#app1",
        data: {
            num: 0,
        },
        methods: {
            add: function () {
                this.num++;

            },
            // sub: function{
            //     this.num--;
            //     if(this.num<1){
            //         this.num =1;
            //     }
            // },
            sub() {
                this.num--;
                if (this.num < 1) {
                    this.num = 1
                }
            }
        }
    })
</script>
</body>
</html>

小结：

1.中间的2个8的地方写法都是ok的，一个是把data变量显示在input标签中，一个是显示在普通的文本变量{{}}中。

2.其中函数方法的调用时methods 

3.函数的2中写法：

加法：

减法：

可以带function也可以不带function。

4.3. 操作样式

　　4.3.1 控制标签class类名

　　格式：<h1 :class="值">元素</h1>  值可以是字符串、对象、对象名、数组。

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // 第一种用法的相关属性
            is_add: true,
            className: 'p1',

            // 第二种用法的相关属性
            bool: true,
            bool2: true,

            // 第三种用法的相关属性
            cls_name: {
                p1: true,
                p2: false,
            },

            // 第四种用法的相关属性
            cls1: "p1",
            cls2: "p2",
            arr:["p1","p2"]
        },
    })
</script>

小结：

 

　　4.3.2 控制标签style样式
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作样式-style</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <!-- 用法1：style的值是一个json对象，对象格式： {样式属性名： 样式值/变量, 样式属性名： 样式值/变量 }
         样式属性名，必须是css样式属性的驼峰式写法
         color  ----》  color
         background-color -----》 backgroundColor
    -->
    <p :style="{color: '#00f'}">第一种用法</p>
    <p :style="{color: text_color,backgroundColor: bgcolor,borderRadius: radius}">第一种用法</p>

    <!--用法2：值是对象变量名，对象在data中进行声明-->
    <p :style="mystyle">第二种用法</p>

    <!--用法3：值是数组-->
    <p :style="[sty1,sty2]">第三种用法</p>

</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // 第一种用法
            text_color:"#00f",
            bgcolor: "orange",
            radius: '30px',

            // 第二种用法
            mystyle:{
                color: '#ffffff',
                backgroundColor: 'red',
                borderRadius: '5px'
            },

            // 第三种用法
            sty1:{
                color: '#fff',
                // borderRadius: "5px",
                'border-radius': '5px',  // 如果不喜欢驼峰式，可以属性名改成字符串写法，就可以写原生的css属性名
            },
            sty2:{
                background: 'blue',
            }
        },
    })
</script>

</body>
</html>
 

 

 和上面就行多比对比对。感觉和class差不多
 

1.class是 自己写的样式p1,p2：data变量， style是  样式对应字段： 对应的样式设置， 样式按照大驼峰法写法。
 

2.可以理解为class 中的 即是类选择器中的具体写法体现就是style样式。
 

 

5.实例vue版选项卡
 

自定制模板：
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        .option_card {
            width: 400px;
            height: 300px;
            background: #eeeeee;
        }

        .title_box {
            height: 50px;
            background: #ff6700;

        }

        span {
            line-height: 50px;
            display: inline-block;
            width: 80px;
            text-align: center;
        }

        .content_box {
            height: 250px;
            background: #eeeeee;
        }

        .active {
            background: #eeeeee;
        }

        .itme {
            height: 250px;
            border-bottom: 1px solid red;
            display: none;

        }
        .current {
            display: block;
        }
    </style>
    <!--    <script src="js/vue.js"></script>-->

</head>
<body>
<div class="option_card">
    <div class="title_box">
        <span class="active">欧美专区</span>
        <span>日韩专区</span>
        <span>大陆专区</span>
        <span>图片专区</span>
    </div>
    <div class="content_box">
        <div class="itme current">欧美专区的内容</div>
        <div class="itme ">日韩专区的内容</div>
        <div class="itme">大陆专区的内容</div>
        <div class="itme">图片专区的内容</div>
    </div>
</div>
</body>
</html>
 

 
 

例子：
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script src="js/vue.js"></script>
    <style>
        .option_card{
            width: 400px;
            height: 300px;
            background: #eeeeee;
        }
        .title_box{
            height: 50px;
            background: #ff6700;
        }
        span{
            line-height: 50px;
            display: inline-block;
            width: 80px;
            text-align: center;
        }
        .content_box{
            height: 250px;
            background: #eeeeee;
        }
        .active{
            background: #eeeeee;
        }
        .itme {
            height: 250px;
            border-bottom: 1px solid red;
            display: none;
        }
        .current{
            display: block;
        }

    </style>
</head>
<body>

<div class="option_card">
    <div class="title_box">
        <span :class="index==0?'active':''" @click="index=0">欧美专区</span>
        <span :class="index==1?'active':''" @click="index=1">日韩专区</span>
        <span :class="index==2?'active':''" @click="index=2">大陆专区</span>
        <span :class="index==3?'active':''" @click="index=3">图片专区</span>
    </div>
    <div class="content_box">
        <div class="itme" :class="index==0?'current':''">欧美专区的内容</div>
        <div class="itme" :class="index==1?'current':''">日韩专区的内容</div>
        <div class="itme" :class="index==2?'current':''">大陆专区的内容</div>
        <div class="itme" :class="index==3?'current':''">图片专区的内容</div>
    </div>


</div>

<script>
    var vm = new Vue({
        el: ".option_card",
        data: {
            index: 0
        }
    })

</script>


</body>
</html>
 

 

 

6.条件渲染指令
 

　　6.1 v-if　
 

　　6.2 v-else
 

　　6.3 v-else-if
 

　　6.4 v-show
 

<div id="app4">
    <span v-show="token==false">
        <a href="">登录</a> | <a href="">注册</a>
        <span v-show="token==true">你好欢迎回到路飞学成！</span>
# 当为v-show时候验证就算是没有通过span标签还是会被渲染出来，只是隐藏了起来！
# 当时v-if 时候，验证没有通过的话span便签不会被渲染出来的！
    </span>
</div>

 

<script>
    var vm4 = new Vue({
        el: "#app4",
        data: {
            token: false,
        }
    })
</script>

 

 

运行结果分析：由于data中的数值是false那么，上面的条件通不过，但是
 

　用法和v-if大致一样，区别在于2点：
 

　　　　1. v-if条件结果为false时，元素根本没有vue渲染出来，所以标签是没有。.v-show条件结果为false，元素还是会被vue渲染出来，是通过了display: none;隐藏起来了；
　　　　2. v-if后面可以根据v-else-if或者v-else，而v-show不能，它只能单独使用。
 

 图片如下：
 

 
 

附上上面的代码v-if， v-else, v-else-if 类似于python中的if elif else，
 

 
 
<div id="app">

    <span v-if="token==false">
        <a href="">登录</a> | <a href="">注册</a>
    </span>

    <span v-else>欢迎回家.</span>



</div>
 <!--v-if指令、v-else-if指令 和 v-else指令-->
    <div id="app2">
    <span v-if="age<18">猜小了</span>
    <span v-else-if="age>18">猜大了</span>
    <span v-else>猜对了</span>
    </div>

</div>
 
 
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            token:false,
        }

    })

    var vm2 = new Vue({
        el: '#app2',
        data: {
            age:45
        }

    })
</script>
 

 
 

 

其中，v-if中的代码：由于不满足条件于是发现span中的标签没有被渲染出来！
 

 

　
 

7. 列表渲染指令
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染指令</title>
    <script src="js/vue.js"></script>
    <style>
        table{
            border-collapse: collapse;
            border: 1px solid red;
            text-align: center;
        }
        table td,th{
            width: 130px;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>图书列表</h3>
    <table border="1">
        <tr>
            <th>序号(正序)</th>
            <th>序号(倒序)</th>
            <th>ID</th>
            <th>书名</th>
            <th>价格</th>
        </tr>
        <tr v-for="item, key in book_list">
            <td>{{key+1}}</td>
            <td>{{book_list.length-key}}</td>
            <td>{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            book_list: [
                {"id":11,"title":"西游记","price":79.8},
                {"id":12,"title":"西厢记","price":79.8},
                {"id":18,"title":"东游记","price":89.8},
                {"id":20,"title":"红楼梦","price":79.5},
                {"id":21,"title":"水浒传","price":79.5},
                {"id":30,"title":"三国演义","price":79.5},
                {"id":31,"title":"道德经","price":79.5},
                {"id":40,"title":"易经","price":74.5},
                {"id":61,"title":"论语","price":79.5},
            ]
        }
    })
</script>
</body>
</html>
 

 
 

结果：
 

 


                    
                    
                    
                    
                    
                    
                    
                    
                    

                        
猜你喜欢

                        

                            
                            
                        

                    


                    
转载自www.cnblogs.com/longerandergou/p/11252947.html

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    


                

            

            


                

                    

                        
                        
                        
                        
                    


                    

                        

                            

                                今日推荐
                            


                            

                        

                    

                    

                        

                            

                                wlnmp 一键安装包更新 240522
                            

                        

                        

                            

                                ChatGPT 严重宕机，结果被造谣“遭遇俄罗斯黑客入侵”
                            

                        

                        

                            

                                Linus “吃狗粮”最积极！
                            

                        

                        

                            

                                开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
                            

                        

                        

                            

                                NetBSD 禁止提交由 AI 生成的代码
                            

                        

                        

                            

                                Apache Doris 2.0.10 版本正式发布！
                            

                        

                        
                        
                    

                


                

                    

                        

                            

                                周排行
                            

                            

                        

                    

                    

                        

                            

                                010-题目：利用条件运算符的嵌套来完成此题：学习成绩>=90分的同学用A表示，60-89分之间的用B表示，60分以下的用C表示。
                            

                        

                        

                            

                                接口测试-工作心得记录八（使用locust库书写接口并发）
                            

                        

                        

                            

                                物理分页和逻辑分页
                            

                        

                        

                            

                                Hive建表语句详解--CREATE TABLE
                            

                        

                        

                            

                                爬虫学习----学习get和post请求
                            

                        

                        

                            

                                PDF生成类库
                            

                        

                        

                            

                                POJ 2139
                            

                        

                        

                            

                                前端路由基本原理
                            

                        

                        

                            

                                I/O多路转接之epoll
                            

                        

                        

                            

                                .NET开源项目 QuarkDoc 一款自带极简主义属性的文档管理系统
                            

                        

                    

                

                

                    

                        

                            

                                每日归档
                            

                            

                                更多
                            

                            

                        

                    

                    

                        

                            2024-05-23(9)
                        

                        

                            2024-05-22(41)
                        

                        

                            2024-05-21(8)
                        

                        

                            2024-05-20(36)
                        

                        

                            2024-05-19(0)
                        

                        

                            2024-05-18(4)
                        

                        

                            2024-05-17(34)
                        

                        

                            2024-05-16(6)
                        

                        

                            2024-05-15(24)
                        

                        

                            2024-05-14(0)
                        

                    

                


            


            
        

    






















    


        

            
代码天地 © 2018 codetd.com

            境外服务器
             
            最新电视剧2022