学习VUE.JS

最新推荐文章于 2024-07-06 16:47:02 发布

改变世界的猿

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量163

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43794897/article/details/84940201

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue.js基本概念

什么是Vue.js
就是一套前段开发的渐进式框架，便于与第三方库或者是既有项目进行整合。也就是说你可以使用Vue.js的整个框架，也可以使用其中的一部分
Vue.js的功能

声明式渲染
Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统，比如说：使用vue.js的插值表达式放在Dom的任意地方，差值表达式的值将被渲染在Dom中。
2.条件与循环
dom中可以使用uve.js提供的v-if、v-for等标签对数据进行判断、循环
3.双向数据绑定
Vue提供v-model指令，他可以轻松实现Dom元素和数据之间双向数据绑定，即修改Dom元素中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值
4.处理用户输入
为了让用户和你的应用进行交互，我们可以用v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法
5.组件化应用构建
Vue.js可以定义一个个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用
Vue.js的使用
1.在html页面使用script引入vue.js的库即可使用
2.使用Npm管理依赖，使用webpack打包工具对vue.js应用打包（大型应用推荐此方案）
3.Vue-CLI脚手架，使用vue.js官方提供的CLI脚手架很方便的创建vue.js工程

Vue.js基础

MVVM模式
vue.js是一个MVVM的框架
M:Model、负责数据存储
V:View、负责页面展示
VM:View Model负责业务逻辑处理，比如AJAX请求，对数据进行加工后交给视图展示
具体来说就是：
Model负责数据的存储，View-Model负责加工，Model负责展示数据
编写Vue.js的步骤
1.编写vue.html页面
2.引入vue.html的类库vue.min.js
3.编写view层（用户展示页面）
4.编写VM数据对象以及其中的Model
5.最后刷新页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的测试程序</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <!--实现在页面上显示一个   你真帅   的名称-->
    <div id="app">
        <!--相当于mvvm中的view-->
        {{name}}
    </div>
</body>
    <script>
        <!--编写vm以及model部分-->
        var VM = new Vue({
            el:"#app",//相当于vue接管了app区域
            data:{
                name:"你太TM帅"
            }
        });
    </script>
</html>

Vue.js中常用指令的使用

v-model的使用，实现双向数据绑定
1.由模型对象绑定到Dom对象，模型对象的改变，Dom对象的值自动改变
2.由Dom对象绑定到模型对象，Dom对象的值改变，模型对象的值自动改变
实现加法运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的测试程序</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num1"/>+
        <input type="text" v-model="num2"/>=
        {{Number.parseInt(num1)+Number.parseInt(num2)}}
    </div>
</body>
    <script>
        <!--编写vm以及model部分-->
        var VM = new Vue({
            el:"#app",//相当于vue接管了app区域
            data:{
                num1:0,
                num2:0
            }
        });
    </script>
</html>

注：v-model仅在以下元素中使用

input
select
textarea components(Vue中的组件)

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

<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>

v-on标签用来监听事件（可以简写为@）
例如：用来监听用户点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的测试程序</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num1"/>+
        <input type="text" v-model="num2"/>=
        <span v-text="result"></span>
        <button v-on:click="change">计算</button>
    </div>
</body>
    <script>
        <!--编写vm以及model部分-->
        var VM = new Vue({
            el:"#app",//相当于vue接管了app区域
            data:{
                num1:0,
                num2:0,
                result:0
            },
            methods:{
                change:function(){
                   this.result =  Number.parseInt(this.num1)+Number.parseInt(this.num2)
                }
            }
        });
    </script>
</html>

v-bind标签用于绑定数据
1.作用：
v-bind可以将数据对象绑定在dom的任意属性中
v-bind可以给dom对象绑定一个或者多个特性，例如动态绑定style和class
2.举例：

<a v-bind:href="url">百度</a>

在Vue对象中定义：

url:'http://www.baidu.com'

v-for和v-if标签
简单的集合对象,显示偶数列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0">{{item}}--{{index}}</li>
        </ul>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                list:[1,2,3,4,5,6]
            }
        });
    </script>
</html>

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(value,key) in user" :key="value">{{key}}--{{value}}</li>
        </ul>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                user:{name:'小明',age:18}
            }
        });
    </script>
</html>

遍历复杂数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in userList" :key="item.user.name">
                <div v-if="item.user.age == 18" style="background: red">
                    {{index}}--{{item.user.name}}--{{item.user.age}}
                </div>
                <div v-else="">
                    {{index}}--{{item.user.name}}--{{item.user.age}}
                </div>
            </li>
        </ul>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                userList:[
                    {user:{name:"小白",age:16}},
                    {user:{name:"小红",age:17}},
                    {user:{name:"小黑",age:18}},
                    {user:{name:"小绿",age:19}}
                ]
            }
        });
    </script>
</html>

改变世界的猿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习VUE.JS

Vue.js基本概念什么是Vue.js就是一套前段开发的渐进式框架，便于与第三方库或者是既有项目进行整合。也就是说你可以使用Vue.js的整个框架，也可以使用其中的一部分Vue.js的功能声明式渲染Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统，比如说：使用vue.js的插值表达式放在Dom的任意地方，差值表达式的值将被渲染在Dom中。2.条件与循...
复制链接

扫一扫