Vue的基础内容-CSDN博客

本文链接：https://blog.csdn.net/Gang__lang/article/details/129596337

Vue的概述

是一个轻量级渐进式的前端框架

特点: 数据驱动 MVVM 组件化

好处: 封装了DOM操作元素的API

基本案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试vue的入门案例</title>
        <!-- 1.导入vue.js,用vue功能 -->
        <script src="vue.js"></script>
    </head>
    <body>
        <!-- 准备数据渲染区 {{msg}} 叫插值表达式，是vue的固定语法，获取msg变量的值-->
        <div id="app">{{msg}}</div>
        
        <!-- 导入vue.js,vue就提供了Vue的工具，想用就new -->
        <script>
            //准备数据
            var a={
                msg:"hello vue"
            }
            //把数据渲染到挂载点
            var com={
                el:"#app",//挂载点--通过css提供的id选择器，选中了id=app的元素
                data:a//数据--把数据渲染在挂载点
            }
            //准备Vue对象
            new Vue(com);
        </script>
    </body>
</html>

MVVM的解释：

M:model-数据相当于msg:"hello vue"

V:view-视图相当于<div id="app">{{msg}}</div>

VM：把二者连接起来

简化后的基本案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试vue的入门案例</title>
        <!-- 1.导入vue.js,用vue功能 -->
        <script src="vue.js"></script>
    </head>
    <body>
        <!-- 准备数据渲染区 {{msg}} 叫插值表达式，是vue的固定语法，获取msg变量的值-->
        <div id="app">{{msg}}</div>
        
        <!-- 导入vue.js,vue就提供了Vue的工具，想用就new -->
        <script>            
            new Vue({
                el:"#app",
                data:{
                    msg:"hello Vue--"
                }
            })
            
        </script>
    </body>
</html>

vue中插值表达式的练习

<div id="aaa">
    {{name}}
    加减乘除：{{age+a}} {{age-a}} {{age*a}} {{age/a}}
    {{age%a}}
    自增自减：
    {{++age}}
    {{--age}}
    <p>三元运算符：{{age>20?'yes':'no'}}</p>
    <p>字符串的操作</p>
    {{name.replace('a','322')}} {{name.length}} {{name.concat(123)}} {{name.substr(2)}}
</div>

vue中函数的定义

<div id="x">{{name}}{{eat()}} {{color("蓝色")}} {{add(1,1)}}</div>
<script>
    new Vue({
        el:"#x",
        data:{
            name:"da",
            age:11
        },
        methods: {
            eat:function(){
                console.log("爱吃肉");
            },
            color:function(color){
                console.log("最喜欢："+color);
            },
            add:function(age1,age2){
                console.log(age1+age2);
            }
        },
    })
</script>

vue中对象和数组的定义及使用

<div id="aa">
    <!-- 解析对象保存的数据语法：对象名.属性名 -->
    {{name}} {{a.name}} {{a.eat()}} {{array[0].name}}
</div>
<script>
    new Vue({
        el:"#aa",
        data:{
            name:"lang1",
            age:11,
        //对象名 ：对象信息
            a:{//自定义对象
                name:"lang2",
                age:12,
                eat:function(){
                    console.log("爱吃饭");
                }
            },
            array:[
                {
                    name:"lang3",
                    age:13
                },
                {
                    name:"lang4",
                    age:14
                }
            ]
        }
    })
</script>

data的三种写法

new Vue({
    el:"#ea",
    data:{
        name:"lang"
    }
    data:function(){
        return{
            msg:"hi~vue"
        }
    }
    data(){
        return{
            msg:"hello"
        }
    }
})

vue中的v-命令（重点）

<!-- 2.闪现的问题：在浏览器上显示了插值表达式 使用v-cloak属性，使用css隐藏效果 -->
<div id="app" v-cloak>
    {{addr}}{{addr}}{{addr}}{{addr}}{{addr}}{{addr}}{{addr}}
    <!-- v-model数据的双向绑定 -->
    <input type="text" v-model="addr"/>
    
    <!-- 3.v-if指令 -->
    {{person.age}}
    <!-- v-if和v-show的区别？都可以判断后者即使不满足条件也会被网页加载只是隐藏起来了 -->
    <p v-if="person.age>=60">老年人</p>
    <p v-else-if="person.age>=30">中年人</p>
    <p v-else-if="person.age>=18">成年人</p>
    <p v-else>未成年</p>
    <p v-show="person.age>=18">成年人</p>
    
    <!-- 4.v-for指令 -->
    {{hobby[0]}}
                                <!--  o代表的是取到的数据,i代表的是下标，arr是数组名-->
    用v-for获取数组中的元素：<p v-for="o,i in hobby">{{i+1}},{{o}}</p>
    
    <!-- 5.v-on用来绑定事件:点击按钮时触发函数 @是一种简写形式-->
    <button v-on:click="show()">点我</button>
    <button @click="show()">点我</button>
    <button v-on:dblclick="show()">双击</button>
    <button @dblclick="show()">双击</button>
      
    <!-- 6.v-bind,用来获取变量的值 -->
    <!-- <a href="{{url}}">链接1</a> 错的，把整个的插入值表达式当做字符串了-->
    <a v-bind:href="url">链接2</a>
    <a :href="url">简写链接3</a>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            addr:"北京",
            person:{
                age:92,
            },
            hobby:["唱","跳","rap","篮球"],
            url:"http://bd.xitong18.com/"
        },
        methods: {
            show:function() {
                console.log("666");
            }
        },
    })
</script>