Vue day01

最新推荐文章于 2024-06-15 14:41:39 发布

Jerry鹿17

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量66

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43024348/article/details/130235809

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1:初识 Vue</title>
</head>

<body>
    <!-- 设置一个模板 template -->
    <div id="app">
        <!-- 
            Vue 基本语法的入门部分最重要的是两个
            1:插值语法
                又被称之为大胡子表达式 格式如下
                <tagName>{{ 初始化的数据 }}</tagName>{{ 初始化的数据 }}
                只能使用在标签外,由于是表达式所以没有什么业务逻辑,无迭代也没有
                流程控制等,仅仅可以简单的显示数据
        -->
        {{ content }}
        {{ count/10 }}
        {{ flag?'IOS':'Android' }}
        {{ text.split('.').reverse().join('@') }}
        {{ info.address }}
        {{ info['address'] }}
        <!-- 大胡子表达式无法显示 null undefined -->
        {{ val1 }}{{ val2 }}
        <!-- 
            2:指令语法
                只能使用在标签上,格式为 v-指令名="绑定的数据"
                非强制绑定数据,存在多种书写格式

                v-html:向元素中插入超文本,支持标签,其实就是
                js 中的 innerHTML
                v-text:向元素中插入文本,不支持标签,仅仅支持文本
                就是 js 中的 innerText
        -->
        <p style="background-color: lightblue;" v-html="myHtml"></p>
        <p style="background-color: lightblue;" v-text="myHtml"></p>
        <!-- v-once:一次性插值绑定,单向绑定是一次性的,之后
        没有单向绑定功能,数据无响应式 -->
        <p v-once>{{ count }}</p>
        <!-- v-model:只能使用在表单项中,自带双向绑定功能 -->
        <input type="text" v-model="myValue">
        <!-- 
            v-bind:绑定元素的属性 
                <tagName v-bind:属性名="初始化的值" />
            语法糖:
                <tagName :属性名="初始化的值" />
        -->
        <img :src="mySrc" :style="myStyle" :title="myTitle">
        <!-- 
            v-on:绑定元素的动作
                <tagName v-on:事件="函数" />
                注意这里函数如果没有参数,不书写括号
            语法糖:
                <tagName @事件="函数" />
                事件与 js 类型,但是没有 on 前缀
        -->
        <button @click="add">{{ count }}</button>
        <input type="text" v-model="count" :style="myCss">
    </div>
    <!-- 如果书写在模板外,则 Vue 实例无法管理,因此无法编译 -->
    {{ content }}
    <!-- 引入 Vue 依赖 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        /* 通过 Vue 依赖提供的构造器,创建一个 Vue 实例 */
        const vm = new Vue({
            /* 以下所有的参数都是属性名:属性值的格式,
            这种配置方式,称之为 OptionsAPI 中文翻译作 配置项式 API
            这是 Vue2 的特色 */
            /* el:element的简写,表示控制的模板 */
            el: '#app',
            /* data:用来封装初始化的数据,这里初始化的数据全部
            封装在 Vue 实例对象的表层,可以在模板中直接使用 */
            data: {
                content: '灌篮高手就要首映了!!',
                count: 100,
                flag: true,
                text: '123.456.789',
                info: {
                    address: ['超然楼', '解放阁', '七星台'],
                },
                val1: null,
                val2: undefined,
                myHtml: '<em style="color:red">本周末不见不散!</em>',
                myValue: '',
                mySrc: './assets/logo.png',
                myTitle: '渐进式 JavaScript 框架',
                myStyle: 'width:100px',
                myCss: 'background-color:rgb(255,0,255)',
            },
            /* beforeMount() {
                debugger
            }, */
            /* methods:用来设置函数 */
            methods: {
                /* 设置函数 */
                add() {
                    /* this:如果书写在 Vue 实例中,则
                    this表示本实例,这里就是 vm,通过 this
                    可以获取所有配置项中的数据 */
                    this.count++
                    let r = Math.floor(Math.random() * 256)
                    let g = Math.floor(Math.random() * 256)
                    let b = Math.floor(Math.random() * 256)
                    this.myCss = `background-color:rgb(${r},${g},${b})`
                },
            },
        })  

        /* 通过 vm 可以直接获取初始化的数据,因为他们
        都被封装在表层,通过 $el 可以获取 Vue 实例管理的
        模板范围 */
        console.log(vm,vm.content,vm.info.address,
        vm.$el)
        /* 
            Vue 实例是如何工作的(简化版,无生命周期,省略
            百分之 90 的内容) 
                浏览器从上往下解析,当解析到插值语法和
                指令语法时,浏览器不进行任何的解析工作,因为
                浏览器只能识别 html css js,这些插值语法
                和指令语法就直接显示在页面上,数据没有挂载,这种
                状态称之为虚拟 DOM
                之后 Vue 实例根据模板范围开始解析模板,将初始化的
                数据全部挂载到模板中,此时插值语法被填充,指令语法
                被解析,最终生成的是真实 DOM,真实 DOM 会覆盖之前的
                虚拟 DOM,最终用户看到的就是真实 DOM
        
        */

    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2:样式渲染</title>
    <style>
        .box1{
            background-color: pink;
        }
        .box2{
            background-color: aqua;
        }
        .box3{
            background-color: palevioletred;
        }
        .box4{
            background-color: silver;
        }
        .box5{
            color:hotpink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 Vue 来渲染样式存在以下两个思路
            1:绑定 class
            2:绑定 style
            -----------------
            1.1:<tagName :class="初始化的值" />
        -->
        <p :class="test1">1.1:绑定 class 后面是字符串</p>
        <!-- 
            1.2:<tagName :class="{类名:初始化的值,类名:初始化的值,}" /> 
            如果初始化的值为真,则类名存在,为假,则类名不存在
        -->
        <p :class="{box2:val2,box3:val3}">1.2:绑定 class 后面是对象</p>
        <!-- 
            1.3:<tagName :class="['类名','类名','类名']" />
        -->
        <p :class="['box4','box5']">1.3:绑定 class 后面是数组</p>
        <!-- 
            2.1:<tagName :style="初始化的值" /> 
        -->
        <p :style="value1">2.1:绑定 style,后面是字符串</p>
        <!-- 
            2.2:<tagName :style="{样式名:样式值,样式名:样式值}" >
            样式名:必须是小驼峰格式
        -->
        <p :style="{backgroundColor:value2,color:value3}">2.2:绑定 style,后面是对象</p>
    
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                test1:'box1',
                val2:false,
                val3:1,
                value1:'background-color:crimson',
                value2:'aqua',
                value3:'gray',
            },
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3:函数计算属性侦听器</title>
</head>
<body>
    <div id="app">
        <!-- 如果可以转换为 number,则进行转换,如果无法转换
        则不转换 -->
        前端成绩: <input type="text" v-model.number="frontEndScore"> <br>
        后端成绩: <input type="text" v-model.number="backEndScore"> <br>
        <hr>
        <!-- 前面说过,函数如果没有实参,则没有括号,但是这里书写括号
        是因为这里没有绑定事件,直接被调用 -->
        总成绩(函数-单向绑定):{{ sumScore() }} <br>
        总成绩(函数-单向绑定): <input type="text" 
        v-model="sumScore()"> <br>
        <!-- 计算属性没有括号,不会用来传值,计算属性就是一个
        属性而已 -->
        总成绩(计算属性-单向绑定):{{ totalScore }} <br>
        总成绩(计算属性-单向绑定): <input type="text" 
        v-model="totalScore"> <br>
        <!-- lazy:点击回车才可以激发绑定功能 -->
        总成绩(计算属性-单双向绑定): <input type="text"
        v-model.number.lazy="totalScores"> <br>

        总成绩(侦听器): <input type="text" 
        v-model="totalWatch"> <br>
    </div> 
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                frontEndScore:90,
                backEndScore:80,
                totalWatch:0,
            },
            /* 设置函数 */
            methods: {
                sumScore(){
                    //return +this.frontEndScore + (+this.backEndScore)
                    //return this.frontEndScore-0 + (this.backEndScore-0)
                    console.log('我是函数 sumScore-------')
                    return this.frontEndScore + this.backEndScore 
                },
            },
            /* 设置计算属性 */
            computed:{
                /* 单向绑定 */
                totalScore(){
                    console.log('我是计算属性 totalScore-------')
                    return this.frontEndScore + this.backEndScore 
                },
                /* 单双向绑定 */
                totalScores:{
                    /* 单向绑定 */
                    get(){
                        return this.frontEndScore + this.backEndScore
                    },
                    /* 双向绑定 这里的形参就是主动输入的总成绩的值 */
                    set(newVal){
                        let avgScore = newVal/2
                        this.backEndScore = avgScore
                        this.frontEndScore = avgScore
                    },
                },
            },
            /* 设置侦听器 */
            watch:{
                /* 设置侦听的数据,这里侦听前端成绩 */
                frontEndScore:{
                    /* 自动执行一次侦听器 */
                    immediate:true,
                    /* 
                        newVal:形参,表示更改后的数据
                        oldVal:形参,表示更改前的数据
                    */
                    handler(newVal,oldVal){
                        /* 总成绩 = 新的前端成绩加上后端成绩  */
                        this.totalWatch = 
                        newVal + this.backEndScore
                    },
                },
            },
        })

        /* 此处侦听后端成绩 */
        vm.$watch('backEndScore',{
            /* 开启深度侦听 */
            deep:true,
            immediate:true,
            handler(newVal,oldVal){
                this.totalWatch =
                newVal + this.frontEndScore
            }
        })

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4:条件渲染</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-model:不得使用!取反
            v-model如果使用在复选框中,则
            如果绑定的值为真,则复选框勾选
            反之不勾选---单向绑定
            如果主动勾选,则绑定的值为 true
            主动不勾选,则绑定的值为 false---双向绑定
        -->
        隐藏: <input type="checkbox" 
        v-model="flag1">
        <!-- 
            条件渲染两种方式
            1:v-if
                后面如果是真值,则元素显示,假值元素隐藏,底层不渲染
                可以取反,切换消耗较大,适用于不频繁切换的场合
        -->
        <div :class="{box:val}" v-if="!flag1"></div>
        <hr>
        <!-- 
            2:v-show
                后面如果是真值,则元素显示,假值元素隐藏,底层依然渲染
                只不过添加了一个 display:none的行内式 可以取反
                初始载入消耗较大,之后切换消耗较小,适合频繁切换的
                场合
        -->
        隐藏: <input type="checkbox" v-model="flag2">
        <div :class="{box:val}" v-show="!flag2"></div>
        <!-- Vue2.4新特性 v-else-if v-else 必须搭配 v-if 使用
        组成流程控制,必须紧邻,不能与 v-show 连用 -->
        <input type="button" value="点击!"
        @click="count++">
        <template v-if="count===0">Vue世界第二</template>
        <template v-else-if="count===1">React世界第一</template>
        <template v-else>jQuery濒临淘汰</template>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                flag1:false,
                flag2:0,
                val:1,
                count:0,
            },
        })
    </script>    
</body>
</html>