Vue入门总结

最新推荐文章于 2024-02-23 15:19:01 发布

fueen

最新推荐文章于 2024-02-23 15:19:01 发布

阅读量189

点赞数 1

分类专栏：其他随笔文章标签： Vue

本文链接：https://blog.csdn.net/f2315895270/article/details/102863402

版权

其他随笔专栏收录该内容

25 篇文章 8 订阅

订阅专栏

欢迎访问我的个人博客:www.ifueen.com

Vue入门

文章目录

Vue入门

简述

摘自百度百科

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

MVVM模式

以前的MVC为

Model层—View层—Controller层

MVVM层分为

Model层----View层----ViewModel

Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；

安装

首先安装Node.js

Node.js安装很简单

Node.js地址直接下载傻瓜式安装即可

然后创建好项目，以本人的Java项目为例

在终端里使用命令

npm install vue

这样就在此次项目中安装好了vue

也可以进行全局安装 npm install vue -g

ECMAScript6语法

常用语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6语法</title>
    <script>
        for (var i = 0; i < 5; i++) {
            /*console.log(i);*/
        }
        /*console.log("让我康康i有没有值"+i);*/

        /* 块级元素let 相当于局部变量*/
        for (let j=0;j<5;j++){
            /*console.log(j);*/
        }
        /*console.log("让我康康i有没有值"+j);*/

        /* const代表常量*/
        /*const s = 5;
        s = 78; //报错，因为const定义后就为常量*/

        /* 解构表达式 */
        /* 数组解构 */
        let arr = [15,56,69];
        const [a1,a2,a3] = arr;
        console.log(a1,a2,a3);

        /* 对象解构 */
        let ars = {'name':'不想说',age:18}
        let {name,age} = ars;
        console.log(name,age);

        /* 箭头函数 */
        let product = {
            name:'最爱',
            eat:function (food) {
                alert(this.name+"吃"+food);
            },
            //箭头函数
            eat1:food=>alert(this.name+"吃"+food),
            //简写
            eat2(food){
                alert(this.name+"吃"+food);
            }
        }
        /*product.eat('汉堡');
        product.eat1('汉堡');
        product.eat2('汉堡');*/

        /* 箭头表达式 + 解构表达式 */
        const person = {
            name:'山泥若',
            age:25,
            speak:['疼痒集团','火焰鼠','喂喂喂']
        }
        function hello(person) {
            alert(person.name+"是"+person.speak[0])
        }
        var hi = ({name,speak}) => alert(name+"是"+speak[0]);
        hi(person);

        /* Promise对象 */
        /* Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大 */
        const p = new Promise((resolve, reject) => {
            //模拟定时任务的异步
            setTimeout(()=>{
                const num = Math.random();
                //随机返回成功或者失败
                if (num<0.5){
                    resolve('成功!'+num)
                }else {
                    reject('失败!'+num)
                }
            },300)
        });
        //成功后调用
        p.then(function (msg) {
            alert(msg);
        }).catch(function (msg) {
            //失败后调用
            alert(msg);
        })

    </script>
</head>
<body>

</body>
</html>

Vue常用语法

数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
    <div id="con">
        {{msg}}
    </div>
    <div class="con1">
        {{user}}
        {{user.name}}
        {{user.age}}
        {{user.red}}
    </div>
    <script>
        var app = new Vue({
            el:"#con",
            data:{
                msg:'你看什么看？'
            }
        });

        var app1 = new Vue({
            el:'.con1',
            data: {
                user:{
                    name:'山泥若',
                    age:25,
                    color:'red'
                }
            }
        });

    </script>

</body>

</html>

数据双向绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="con">
    <input type="text" v-model="message" v-on:change="changeData">
</div>
    <script>
        var vue = new Vue({
           el:'#con',
           data:{
               message:'山泥若是大恶人'
           },
           methods:{
               changeData(){
                    this.message='山泥若biss';
               }
           }
        });
    </script>

</body>

</html>

Vue表达式

一般表达式都是写在{{}}

语法:{{表达式}}

例如：{{5+5}}

Vue指令

v-text指令：
<标签名 v-text="表达式"></标签名>
v-html指令：
<标签名 v-html="表达式"></标签名>
v-for指令：
<标签 v-for="元素 in 数据源"></标签>
v-bind指令：
<标签 v-bind:标签属性名字="表达式"></标签>
v-model指令：
<标签 v-model="表达式"></标签>
v-show指令：
<标签名 v-show="表达式"></标签名>
v-if指令：
<标签名 v-if="表达式"></标签名>
v-else指令：
<标签名 v-if="表达式"></标签名>
<标签名 v-else></标签名>
v-else-if指令：
<标签名 v-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else></标签名>

fueen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门总结

欢迎访问我的个人博客:www.ifueen.comVue入门文章目录Vue入门简述MVVM模式安装ECMAScript6语法常用语法Vue常用语法Vue表达式Vue指令简述摘自百度百科Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第...
复制链接

扫一扫