Vue入门总结

快来打我* 2023-10-08 09:11 31阅读 0赞

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

## Vue入门 ##

#### 文章目录 ####

*  Vue入门
 *   *  简述
     *  MVVM模式
     *  安装
     *  ECMAScript6语法
     *   *  常用语法
     *  Vue常用语法
     *  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地址][Node.js] 直接下载傻瓜式安装即可

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

在终端里使用命令

> npm install vue

![format_png][]

这样就在此次项目中安装好了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></标签名>

[www.ifueen.com]: https://www.ifueen.com
[Node.js]: https://nodejs.org/en/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zMi5heDF4LmNvbS8yMDE5LzExLzAxL0tIUjlmSi5wbmc?x-oss-process=image/format,png