二、vue.js基础

最新推荐文章于 2024-06-12 08:41:10 发布

Dove_1234

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量214

点赞数

分类专栏： js vue.js

本文链接：https://blog.csdn.net/baidu_39332177/article/details/109333000

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue.js

4 篇文章 0 订阅

订阅专栏

前篇：
一、vue.js介绍

二、vue.js基础

1、 MVVM模式

vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。

MVVM拆分解释为：

Model:负责数据存储
View:负责页面展示
View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单。

用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点，以及使用MVVM模式是如何来解决这个缺点的：
在这里插入图片描述
从上图看出，VM(ViewModel)可以把view视图和Model模型解耦合，VM的要做的工作就是vue.js所承担的。

2、入门程序

本次测试我们在门户目录中创建一个html页面进行测试，正式的页面管理前端程序会单独创建工程。
在门户目录中创建vuetest目录，并且在目录下创建vue_01.html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>vue.js入门程序</title>
<script src="/js/vue/vue.min.js"></script>
</head>
<body>
<div id="app">
{{name}}
<!‐‐ 在Vue接管区域中使用Vue的系统指令呈现数据
这些指令就相当于是MVVM中的View这个角色 ‐‐>
</div>
</body>
<script>
// 实例化Vue对象
//vm :叫做MVVM中的 View Model
var VM = new Vue({
el:"#app",//表示当前vue对象接管app的div区域
data:{
name:'传智播客'// 相当于是MVVM中的Model这个角色
}
});
</script>
</html>

代码编写步骤：
1、定义html，引入vue.js
2、定义app div，此区域作为vue的接管区域
3、定义vue实例，接管app区域。
4、定义model（数据对象）
5、VM完成在app中展示数据

3、1+1=2

实现效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js入门程序</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    {{name}}  用下边v-text方式代替 [插值表达式]，可解决闪烁问题-->
    <span v-text="name"></span>
    <input type="text" v-model="num1"> +
    <input type="text" v-model="num2"> =
    <!--    {{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <!--    {{result}}-->
    <!--    <span v-text="result"></span>-->
    <button v-on:click="caculate">计算</button>


    <div>
        <ul>
            <li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0 ">{{index}}--{{item}}</li>
        </ul>
        <ul>
            <li v-for="(value,key) in user">{{key}}--{{value}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in userList">{{index}}--{{item.username}}--{{item.age}}</li>
        </ul>
        <ul>

            <li v-for="(item,index) in userList">
                <div v-if="item.username == 'zhou'" style="background: green">
                    {{index}}--{{item.username}}--{{item.age}}
                </div>
                <div v-else-if="item.username == 'wang'" style="background: red">
                    {{index}}--{{item.username}}--{{item.age}}
                </div>
                <div v-else="" style="">
                    {{index}}--{{item.username}}--{{item.age}}
                </div>
            </li>

            <!--            <li v-for="(item,index) in userList">{{index}}&#45;&#45;{{item.username}}&#45;&#45;{{item.age}}</li>-->
        </ul>
    </div>
    <!-- v-bind 示例 -->
    <div v-bind:style="{fontSize:size + 'px' }">
        字号大小
    </div>
    <a v-bind:href="url">csdn链接</a>
</div>
<!‐‐ 在Vue接管区域中使用Vue的系统指令呈现数据
这些指令就相当于是MVVM中的View这个角色 ‐‐>

</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    //vm :叫做MVVM中的 View Model
    var VM = new Vue({
        el: "#app",//表示当前vue对象接管app的div区域
        data: {
            name: 'Vue第2个示例',// 相当于是MVVM中的Model这个角色
            num1: 0,
            num2: 0,
            result: 0,
            list: [1, 2, 3, 4],
            user: {username: 'zhou', age: '10'},
            userList: [{username: 'zhou', age: '10'}, {username: 'wang', age: '12'}, {username: 'liu', age: '15'}],
            url: "https://www.csdn.net/",
            size:50,

        },
        methods: {
            caculate: function () {
                this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2)
                alert("计算中...")
            }
        }
    });
</script>
</html>

本例子学习了：
1、v-model：

在表单控件或者组件上创建双向绑定 2、v-model仅能在如下元素中使用：
input
select
textarea
components（Vue中的组件）

2、解决插值表达式闪烁问题，使用v-text

v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题

3、v-on绑定一个按钮的单击事件
在这里插入图片描述

4、v-bind

1、作用：
v‐bind可以将数据对象绑定在dom的任意属性中。
v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class
2、举例：
<img v‐bind:src="imageSrc">
<div v‐bind:style="{ fontSize: size + 'px' }"></div>
3、缩写形式
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>

4.v-if和v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js入门程序</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    {{name}}  用下边v-text方式代替 [插值表达式]，可解决闪烁问题-->
    <span v-text="name"></span>
    <input type="text" v-model="num1"> +
    <input type="text" v-model="num2"> =
    <!--    {{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <!--    {{result}}-->
    <!--    <span v-text="result"></span>-->
    <button v-on:click="caculate">计算</button>


    <div>
        <ul>
            <li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0 ">{{index}}--{{item}}</li>
        </ul>
        <ul>
            <li v-for="(value,key) in user">{{key}}--{{value}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in userList">{{index}}--{{item.username}}--{{item.age}}</li>
        </ul>
        <ul>

            <li v-for="(item,index) in userList">
                <div v-if="item.username == 'zhou'" style="background: green">
                    {{index}}--{{item.username}}--{{item.age}}
                </div>
                <div v-else-if="item.username == 'wang'" style="background: red">
                    {{index}}--{{item.username}}--{{item.age}}
                </div>
                <div v-else="" style="">
                    {{index}}--{{item.username}}--{{item.age}}
                </div>
            </li>

            <!--            <li v-for="(item,index) in userList">{{index}}&#45;&#45;{{item.username}}&#45;&#45;{{item.age}}</li>-->
        </ul>
    </div>
</div>
<!‐‐ 在Vue接管区域中使用Vue的系统指令呈现数据
这些指令就相当于是MVVM中的View这个角色 ‐‐>

</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    //vm :叫做MVVM中的 View Model
    var VM = new Vue({
        el: "#app",//表示当前vue对象接管app的div区域
        data: {
            name: 'Vue第2个示例',// 相当于是MVVM中的Model这个角色
            num1: 0,
            num2: 0,
            result: 0,
            list: [1, 2, 3, 4],
            user: {username: 'zhou', age: '10'},
            userList: [{username: 'zhou', age: '10'}, {username: 'wang', age: '12'}, {username: 'liu', age: '15'}]

        },
        methods: {
            caculate: function () {
                this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2)
                alert("计算中...")
            }
        }
    });
</script>
</html>

Dove_1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二、vue.js基础

前篇：一、vue.js介绍二、vue.js基础1、 MVVM模式vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。MVVM拆分解释为：Model:负责数据存储View:负责页面展示View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单。用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点，以及使用MVVM模
复制链接

扫一扫