初识Vue.js01

W_Child
184 阅读6分钟

什么是Vue.js?

  • Vue是一款套用于构建用户界面的渐进式JavaScript框架，与其它的框架不同，Vue被设计为可以自底向上逐层应用。
  • Vue代码始于一个Vue对象
    var vm = new Vue({
        el: "#app",  //表示将要控制的标签的id名称
        data: {  //这个data属性的值是一个对象，这个对象里面的属性，就是 app 这个标签的内部数据
            str1: "Hello World!",  
            str2: "Let's go",
        }
    })

  • Vue 的特点和 Web 开发中常见得到高级功能：

    • 解耦视图和数据
    • 双向数据绑定
    • 可复用的组件
    • 前端路由技术
    • 状态管理
    • 虚拟DOM

Vue 的导入方式

  • 直接 CND 引入
    <!-- 开发环境版本，包含了有帮助的命令行警告 --> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  • 下载和引入
    // 开发环境 https://vuejs.org/js/vue.js
    // 生产环境 https://vuejs.org/js/vue.min.js

Vue 的简单使用

Vue的数据怎么填充到页面上

    <div id="app">
        <p>{{ str1 }}</p> //Vue的数据使用两个花括号包裹起来--->也叫作胡子语法
        <p>{{ num1 }}</p>
        <p>{{ num2 }}</p>
        <p>{{ num1 + 1 }}</p> //也可以使用一些简单的语法
        <p>num1 和 num2 较大的数字是哪一个：{{ num1 > num2 ? num1 : num2}}</p>
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                str1: "Hello World",
                num1: 10,
                num2; 8，
            }
        })
    </script>

v-bind指令和v-on指令

  1. v-bind 指令: 如果是要给标签的属性添加数据的话，就要使用v-bind(动态控制标签属性的值)， 并且不可以加花括号，直接将数据名放上去就可以了
    <div id="app">
        <a v-bind:href = "baiduUrl">百度</a>
        // v-bind 还可以简写为 :
        <a :href = "taobaoUrl">淘宝</a>
        <a :href = "jdUrl">京东</a>
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                baiduUrl: "https://www.baidu.com",
                taobaoUrl: "https://www.taobao.com",
                jdUrl: "https://www.jd.com",
            }
        })
    </script>
  1. v-on 指令:当标签需要添加事件的时候，就可以使用 v-on:事件类型(click、mouseover...)
    <div id="app">
        <p>{{ num1 }}</p>
        <p>{{ num2 }}</p>
        <p>num1 和 num2 较大的数字是哪一个：{{ num1 > num2 ? num1 : num2 }}</p>
        
        // 其实这里也是一个双向数据绑定的过程，当点击button使得 num1 的值超过
    num2的时候，上面的三元表达式也会跟着改变
        <button v-on:click = "num1 += 1">点我 num1 加1</button>
        <button v-on:click = "add">点我 num1 加1</button>
        // v-on:click 可以简写为 @click
        <button @click="add(8)">点我 num1 加1</button>
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num1: 8,
                num2: 24,
            },
            // 事件要写在 methods 方法中
            methods: { 
                add:function(){
                // 如果methods方法中需要调用到data里面的数据，要在前面加一个 this
                    this.num1 += 5;
                },
                add2(num){
                    this.num1 += num;
                }
            }
        })
    </script>

Vue控制类名

    <div id="app">
    //前面说过了只要给标签添加属性，就可以使用 v-bind ---> :(简写)
    // 通常都是给类名附一个布尔值，true 就表示存在，false 就表示不存在
        <div class="box" :class="box1:bool1"></div>
        
    // 还可以写成数组的形式(数组形式就表示一定存在)-->数组里面的类名还要用''包裹起来
        <div class="box" :class="[ 'box2', 'box3' ]"></div>
        
    // 类名不确定有还是没有的时候，可以根据条件给它一个三元表达式
        <div class="box" :class=" bool2 ? 'current' : '' "> </div>
        
    // 也可以给标签添加一个 style 属性 ---> 如果属性名之间有 - 需要将 - 去掉，并且
    使用驼峰命名法
        <div :style=" fontSize:'50px' "></div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                bool1: false,
                bool2: true,
            }
        })
    </script>

v-if 和 v-show 指令

  1. v-show 指令
    // v-show 是通过控制 display 的值使标签显示或者隐藏
    <div v-show="true">盒子</div>  //显示
    <div v-show="false">盒子</div> //隐藏 display:none  ---> 会渲染，但是不显示
  1. v-if 指令
    // v-if 是通过操作节点来让盒子显示或者消失
    <div v-if="true">盒子</div>  //显示
    <div v-if="false">盒子</div> //消失 ---> 被删除了 ---> 整个节点都被删除了
    
    // v-else ---> 并不需要赋值 如果 v-if 成立，v-else 不显示，反之亦然
    <div v-if="true">盒子</div>
    <div v-else>盒子</div>
    
    // v-else-if ---> 多层判断，如果 v-if 成立，则执行 v-if 语句，如果不成立，则判断
    v-else-if ，如果成立，则执行 v-else-if 语句 (其实原理与 if 跟 else-if 一样)
    <div id="app">
        <div v-if="str == 'a' ?">111</div>
        <div v-else-if="str == 'b' ">222</div>
        <div v-else-if="str == 'c' ">333</div>
        <div v-else>444</div>
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                str: "a",
            }
        })
    </script>

数组和对象的渲染(初步使用)

  • v-for：循环数组或者对象
    <div id="app">
        // 当循环的是一个数组的时候
        <ul>
            // i 代表的是数组中的每一个元素
            <li v-for="i in list">{{i}}</li>
        </ul>
        
        <ul>
            // i 代表的是数组中的每一个元素，k 代表的是数组的下标
            <li v-for="i,k in list">{{i}} {{k}}</li>
        </ul>
        
        // 当循环的是一个对象的时候
        <ul>
            // i 代表的是对象中的每一个键值
            <li v-for="i in my_Obj">{{i}}</li>
        </ul>
        
        <ul>
            // i 代表的是对象中的每一个键值，k 代表的是键
            <li v-for="i,k in my_Obj">{{i}} {{k}}</li>
        </ul>
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [
                '重返欧洲联赛？外媒：杰克逊即将结束CBA生涯',
                '上周表现糟糕球员：国内4将上榜，麦卡勒姆低迷，赵睿三分失准！',
                '美媒：安吉若5换2得总冠军双塔乐福+TT，保底东决！',
                '邹正于昨日在青岛完婚，富力官博：祝百年好合白头偕老'
                ],
                my_Obj:{
                    name: "andy",
                    age: 12,
                }
            }
        })
    </script>

双向数据绑定

    <div id="app">
        <input type="text" v-model="txtVal" /> // v-model的值是一个变量名，这个变量会接收
        用户输入的值
        <p>{{ txtVal }}</p>
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                txtVal: "",   // 用来接收用户输入的文本
            }
        })
    </script>
  • v-model 接收了用户输入的文本内容，将内容赋值给了变量 txtVal ，再讲 txtVal 的值渲染到视图上面 ---> 这个过程叫做双向数据绑定
avatar
文章
阅读
粉丝