vue学习(二)之基本使用

最新推荐文章于 2023-03-16 19:35:58 发布

旋舞的水晶叶

最新推荐文章于 2023-03-16 19:35:58 发布

阅读量89

点赞数 1

分类专栏： vue学习

本文链接：https://blog.csdn.net/qq_39253096/article/details/88087698

版权

vue学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、基本使用流程

1）引入vue.js

<script type="text/javascript" src="../js/vue.js"></script>

2）创建vue对象

el:指定根element(选择器)

data:初始化数据(页面可以访问)

3) 双向数据绑定

4）显示数据使用{{XXX}}%

5）第一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习的第一个HelloWorld</title>
</head>

<body>
<!--1.引入vue.js
2.创建vue对象
   el:指定根element(选择器)
   data:初始化数据(页面可以访问)

3.双向数据绑定;v-model
4.显示数据：{{xxx}}
5.理解vue的MVVM实现
MVVM
model:模型 ，数据对象data
view :视图，模板页面
viewModel：视图模型，vue的实例
-->

<div id="app"><!--view-->
    <input type="text" v-model="message">
    <p>hello {{message}}</p>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //创建Vue实例
    const vm = new Vue({//配置对象  option
        el: '#app', //element : 选择器
        data: { //数据(model)
            message: '旋舞的水晶叶'
        },
        methods:{

        }
    })
</script>
</body>
</html>

展示结果：

二、模板语法

2.1 MVVM的理解

MVVM:是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定

M:model 模型本质是数据对象data

V:view 视图本质是模板页面

VM:view Model 视图模型本质就是Vue的实例

<script type="text/javascript">
    //创建Vue实例
    const vm = new Vue({//配置对象  option
        el: '#app', //element : 选择器
        data: { //数据(model)
            message: '旋舞的水晶叶'
        },
        methods:{

        }
    })
</script>

2.2 模板的理解

动态的html页面包一些JS语法代码双大括号表达式指令以V开头的自定义标签属性

2.3 双大括号表达式

语法：{{}} 或者{{{}}}

功能：向页面数出数据

可以调用对象的方法

2.4 指令一：强制数据绑定

功能：指定变化的属性值

完整写法： v-bind='xxx' //xxx会作为表达式解析执行

简洁写法：：bind='xxx'

2.5 指令二：绑定事件监听

功能：绑定指定事件名的回调函数

完整写法： v-on:click="yyy"

简洁写法：@click='yyy'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1 模板的理解
    动态的Html页面
        包含一些js 语法代码
        双大括号表达式
        指令 以V开头的自定义标签属性

2 双大括号表达式
    语法：{{}} 或者{{{}}}
    功能：向页面输出数据
    可以调用对象的方法

3 指令一:强制数据绑定
    功能：指定变化的属性值
    完整写法： v-bind='xxx' //xxx会作为表达式解析执行
    简洁写法： ：bind='xxx'

4.指令一:绑定事件监听
    功能：绑定指定事件名的回调函数
    完整写法： v-on:click="yyy"
    简洁写法：@click=''

-->


<div id="app"><!--view-->
    <p> {{message}}</p> <!--textContext-->
    <h2>1.双大括号表达式</h2>
    <p> {{msg}}</p>
    <p> {{msg.toUpperCase()}}</p>
    <p v-text="mess"> </p><!--textContext-->
    <p v-html="mess"> </p><!--innerHTML-->
    <p>{{msg}}</p>
    <h2>2.强制数据绑定</h2>
    <img v-bind:src="imgUrl">
    <img :src="imgUrl">
    <h2>3.绑定数据监听</h2>
    <button v-on:click="test()">test1</button>
    <button @click="test()">test1</button>

</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">

    new Vue({
        el: '#app', //element : 选择器
        data: { //数据(model)  data 的所有属性都会成为vm对象的属性，而模板页面中可以直接访问
            message: '旋舞的水晶叶在复习Vue模板语法',
            msg:'i love you ge xing',
            mess:'<a href="https://www.baidu.com">点击进入百度</a>',
            imgUrl:'https://cn.vuejs.org//images/logo.png'
        },
        methods:{
            test(){
                console.log("test");
            }
        }
    });
</script>


</body>
</html>

页面展示结果：

三、计算属性和监视

3.1 计算属性

在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果

3.2 监视属性

通过vm对象的$watch()或者watch配置来监视指定的属性，当属性变化时，回调函数自动调用，在函数内部进行计算

3.3 计算属性高级

通过getter 和setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次gettte计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与监视</title>
</head>
<body>
<!--
1.计算属性
    在computed属性对象中定义计算属性的方法
    在页面中使用{{方法名}}来显示计算的结果

2.监视属性
   通过vm对象的$watch()或者watch配置来监视指定的属性
   当属性变化时，回调函数自动调用，在函数内部进行计算
3.计算属性高级
    通过getter 和setter实现对属性数据的显示和监视
    计算属性存在缓存，多次读取只执行一次gettte计算-->
<div id="demo">
    姓：<input type="text" placeholder="FirstName" v-model="firstName"/><br/>
    名：<input type="text" placeholder="LastName" v-model="lastName"/><br/>
    姓名1(单向)：<input type="text" placeholder="Full Name1" v-model="fullName1"><br/>
    姓名2(单向)：<input type="text" placeholder="Full Name2" v-model="fullName2"><br/>
    姓名3(双向)：<input type="text" placeholder="Full Name3" v-model="fullName3"><br/>
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>

</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   const vm= new Vue({

        el: '#demo', //element : 选择器
        data:{
            firstName:'旋舞',
            lastName:'的水晶叶',
            fullName2:'的水晶叶'
        } ,
        computed:{//计算属性中一个方法，方法的返回值为属性值
            //什么时候执行：初始化显示 相关的data属性数据发生改变
            fullName1(){
                console.log("fullName1()");
                return this.firstName+" " +this.lastName;
            },
            fullName3:{
                //回调函数 三要素 1、你定义的，2、你没调 3、最后执行了
                //什么时候调用 ？ 用来干嘛的？
                //回调函数 计算并返回当前属性的值
                get(){
                    return this.firstName+" " +this.lastName;
                },
                //回调函数 当属性值发生改变时回调更新相关的属性数据
                set(value){//value 就是fullName3最新属性值
                   const fullNames= value.split(" ");
                    this.firstName=fullNames[0];
                        this.lastName=fullNames[1];
                }
            }
        },
        watch:{

            firstName: function (value) {//fistName发生改变
                console.log("this"+this);//就是Vm对象
                this.fullName2=value+" " +this.lastName;
            }
        }

    })
    vm.$watch('lastName',function (value) {
        //更新fullName2
        this.fullName2=this.firstName+" " +value;
    })
</script>
</body>
</html>

运行结果：

四、class与style绑定

4.1 理解

在应用界面中，某个或者某些元素的样式是变化的，class/style绑定就是专门用来实现动态样式绑定效果的技术

4.2 class绑定

class 绑定：class='xxx'

xxx是字符数组

xxx是对象

xxx是数组

4.3 style绑定

：style="{ color : activeColor ,fontSize:fontSize+'px'}"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class与style的绑定</title>
    <style>
        .aClass {
            color:red;
        }
        .bClass{
            color:blue;
        }
        .cClass{
            font-size: 40px;
        }
    </style>
</head>
<body>

<!--
1.理解
    在应用界面中，某个或者某些元素的样式是变化的
    class/style绑定就是专门用来实现动态样式绑定效果的技术
2.class 绑定 ：class='xxx'
    xxx是字符数组
    xxx是对象
    xxx是数组

3.style绑定
    ：style="{ color : activeColor ,fontSize:fontSize+'px'}"
-->
<div id="demo">
    <h2>1.class绑定 :  :class="xxx"</h2><br/>
    <p :class="a" class="cClass">xxx是字符串</p>
    <p :class="{aClass:isA,bClass:isB}" >xxx是对象</p>
    <p :class="['aClass','cClass']" >xxx是数组</p>
    <h2>2.style绑定</h2><br/>
    <p :style="{ color : activeColor ,fontSize:fontSize+'px'}" >：style="{ color : activeColor ,fontSize:fontSize+'px'}"</p>
    <button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm=new Vue({
        el:"#demo",
        data:{
            a:'aClass',
            isA:true,
            isB:false,
            activeColor:'green',
            fontSize:30
        },
        methods:{
            update(){
                this.a='bClass';
                this.isA=false;
                this.isB=true;
                this.activeColor='pink'
                this.fontSize=20
            }
        }
    });

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

运行结果：

旋舞的水晶叶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习(二)之基本使用

一、基本使用流程1）引入vue.js&lt;script type="text/javascript" src="../js/vue.js"&gt;&lt;/script&gt;2）创建vue对象 el:指定根element(选择器)data:初始化数据(页面可以访问)3) 双向数据绑定4）显示数据使用{{XXX}}%5）第一个例子...
复制链接

扫一扫