Vue(一)：基础语法（上）

希江木

已于 2023-03-15 16:09:00 修改

阅读量301

点赞数

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

于 2020-09-18 05:51:06 首次发布

本文链接：https://blog.csdn.net/baidu_38730364/article/details/108631411

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

简介

框架作者：尤雨溪
官网地址 https://cn.vuejs.org/
github上面众多star数量
组件化的、快速开发的特点
最流行前端开发框架之一

一.生命周期

可结合官网看关于生命周期的知识

beforeCreate 组件刚刚被创建创建前
created 组件创建完成创建后
beforeMount 挂载之前载入前

Mounted 挂载之后（非常重要）载入后

 ajax请求大部分会在mounted里面进行。
 VUE是虚拟DOM，当需要对DOM操作时，也是在mounted函数中。

beforeDestroyed 组件销毁前调用销毁前
destoryed 组件销毁后调用销毁后

安装步骤(参考)：

打开电脑运行命令cmd，输入npm-v检测是否安装npm。
要安装npm的前提是必须要安装Node.js。下载网址： https://nodejs.org/en/，安装完Node.js之后，在命令行中输入path，如果path中有node，说明已经配置好path环境变量。
命令行中再输入node -v，就可以查看node的版本。

node安装成功就是npm安装成功，因为npm这个管理工具包是集成在node.js的安装软件当中的。

安装git，来代替cmd命令行。（网址：https://git.scm.com/downloads）

在git安装成功后，在符盘文件夹内右键，会出现git Bash Here，点击之后自动定位到响应的盘符。然后按照安装步骤输入命令。
#全局安装vue-cli：npm install  --global vue-cli
注：使用淘宝npm镜像替代npm，访问国外的东西，速度会变快。

下载淘宝npm镜像（cnpm）

npm install -g cnpm --registry=https://registry.npm.taobao.org

下载之后就不需要使用npm，而是cnpm：

cnpm install  --global vue-cli即可

vue项目初始化命令如下，若没有安装webpack，则先安装webpack

npm install -g webpack

vue init webpack myVue

注：安装过程中有个选项（Use ESLint to line your code ?选择 No ）
在这里插入图片描述

初始化完成后的vue项目目录如下：
在这里插入图片描述

#安装依赖包

cd wx_gzh
cnpm install（注意不是npm，而是cnpm）
npm run dev（注意这个是可以用npm的，让项目跑起来）

继续输入以上命令。
成功之后默认打开这个界面，就是vue项目的默认启动页。
在这里插入图片描述
路由引入(@表示的是src目录)

第一种方式：
但是第一种引入方式有的版本不支持，可以使用第二种引入方式。

 {
      path: '/demo1',
      name: 'demo1',
      component: require("@/pages/demo1/index.vue")
    }

第二种引入方式：
和hello的文件引入方式相同，可直接复制修改。
只要是index取名的文件可以省略不写，写上也没有任何问题。
然后再配置到routes中。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Demo1 from '@/pages/demo1/index.vue' //只要是index命名的文件可以省略不写，这里写上更完整。

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/demo1',
      name: 'demo1',
      component: Demo1
    }
  ]
})

路由就搭建好了，在地址栏输入demo1时，会去找到require中的页面，把它渲染到浏览器。
浏览器中会显示一个logo，这个logo在router文件夹下的App.vue中的img标签中，删除即可.
在这里插入图片描述
生命周期函数在相应的阶段会自动调用执行。

<template>
    <div>
        helloworld
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    beforeCreate(){
        console.log("beforeCreate");
    },
    created(){
        console.log("created");
    },
    beforeMount(){
        console.log("beforeMount");
    },
    mounted(){
        console.log("mounted");
    }
}
</script>

二.选项数据

data本身是函数：data是全局组件变量的定义，如果需要用到某些数据的时候，定义一个变量去接收。在这里定义的变量可以渲染到模板上，叫数据绑定。
computed本身是对象：computed是对象，里面包含了各种函数，注意写法没有（），而是用冒号。
methods本身是对象：里面包含了各种函数，method下的函数是给事件用的。

<template>
    <div>
        <div>数据选项</div>
        <div>--------------------------------------</div>
        <div>data: {{msg}}</div>
        <div>--------------------------------------</div>
        <div>computed: {{aDouble}}</div>
        <div>--------------------------------------</div>
        <div @click="say('hi')">点击我</div>
    </div>
</template>

<script>
export default {
    data(){//全局组件变量的定义
        return{
            msg:'helloworld',
            num:1
        }
    },
    computed:{
        aDouble(){
            return this.num*2;//this是全局对象
        }
    },
    methods:{
        say(h){
            alert(h);
        }
    }
}
</script>

三.模板语法

1.data

data: {{msg}}

2.模板中嵌入js代码

data: {{num + 1}}

3.指令 v-html, v-on,v-bind等

<div v-html="rawHtml"></div> ：v-html指令把绑定的标签变成div里的子元素。
<div v-bind:class="red"></div>：v-bind可以让标签的属性动态地与data进行绑定，就是可以让属性里面的值可以动态化。
<div v-on:click="say('hi')">点击我</div>：v-on用来绑定事件。
@click=say('hi')是上面v-on的简写方式。

4.计算属性

<div>computed:{{aDouble}}</div>：aDouble是一个函数，模板当中绑定函数，在函数中对变量进行计算操作。

5.过滤器

<div>{{ message | capitalize }}</div>：message通过capitalize这个过滤器函数进行过滤。

<template>
    <div>
        <div>模板语法</div>
        <div>-----------------------------------------</div>
        <div>
            data:{{msg}}
        </div>
        <div>-----------------------------------------</div>
        <div>{{number +1}}</div>
        <div>-----------------------------------------</div>
        <div v-html="rawHtml"></div>
        <!-- 会渲染成：
        <div>
            <sapn>123</span>
        </div>
        -->
        <div v-bind:class="red"></div><!--red是定义的变量-->
        <div v-on:click="say('hi')">点击我</div><!-- v-on用来绑定事件 -->
        <div>-----------------------------------------</div>
        <div @click="change">修改颜色</div><!--上面的简写方式-->
        <div>-----------------------------------------</div>
        <div>{{ message | capitalize }}</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'hellowworld',
            number:1,
            rawHtml:'<sapn>123</span>',
            red:'red active',
            message:'message'
        }
    },
    methods:{
        change(){
            this.red='blue';
        },
        say(h){
            alert(h);
        }
    },
    filters:{//用来写过滤器函数
        capitalize(g){
            return '123';
        }
    }
}
</script>

四.计算属性

模板中是可以直接插入js代码的，但是在模板中放入太多的逻辑会让模板过重且难以维护。
计算属性下所有函数可以放到computed中。

这样做到了分离，减轻模板的压力。
代码中的函数是把字符串进行了反转。

<template>
    <div>
        <div>计算属性</div>
        <div>-------------------------------------------------</div>
        <!-- <div>{{msg.split('').reverse().join('')}}</div> -->
        <div>{{reversedMessage}}</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'helloworld'
        }
    },
    computed:{
        reversedMessage(){
            return this.msg.split('').reverse().join('');
        }
    }
}
</script>

五.class与style绑定（v-bind/:）

class与style的动态绑定（使用v-bind指令）：
①动态地绑定一个或多个特性
②缩写' ：'
③原始写法 v-bind:class 缩写写法 :class

Class绑定
第一种绑定方式：<div v-bind:class="{'active':isActive,'text-danger':hasError}"></div>
第二种绑定方式：<div :class='classObject'>class2</div>
第三种绑定方式：<div :class="[activeClass,errorClass]">class3</div>

Style绑定
第一种Style绑定：<div v-bind:style ="{'color': activeColor ;'fontSize': fontSise + 'px'}">style1 </div>
第二种绑定方式：<div v-bind: style=styleObject>style2</div>
第三种绑定方式：<div v-bind:style="[baseStyles,overridingStyles]">style3</div>

<template>
    <div>
        <div>class与style绑定</div>
        <div>-------------------class------------------------</div>
        <!-- 第一种绑定方式 -->   <!-- static active -->
        <div class="static"
            v-bind:class="{ 'active':isActive, 'text-danger': hasErroe }">
            class1
        </div>
        <!-- 第二种绑定方式 -->
        <div :class='classObject'>class2</div>
        <!-- 第三种绑定方式 -->
        <div :class="[activeClass,errorClass]">class3</div>
    
    
        <div>--------------------style-----------------------</div>
        <!-- 第一种绑定 -->
        <div v-bind:style="{'color':activeColor,'fontSize':fontSize +'px'}">style1</div>
        <!-- 第二种绑定方式 -->
        <div v-bind:style='styleObject'>style2</div>
        <!-- 第三种绑定方式 -->
        <div v-bind:style="[baseStyles,eoverridingStyles]">style3</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isActive:true,
            hasErroe:false,
            classObject:{
                'active':true, 
                'text-danger': false
            },
            activeClass:'active',
            errorClass:'text-danger',


            activeColor:'red',
            fontSize:24,
            styleObject:{
                'color':'blue',
                'fontSize':'24px'
            },
            baseStyles:{
                color:'grey'
            },
            eoverridingStyles:{
                fontSize:'24px'
            }
        }
    },

}
</script>

六.条件渲染（v-if）

条件渲染（也是模板语法中的指令）:v-if指令

v-if
v-if	 v-else
v-if 	 v-else-if 	 v-else

对应js代码中的if-else，可以根据变量选择显示标签。


补充指令：v-show(跟v-if很像，变量值为布尔值，控制标签的显示)

<template>
    <div>
        <div>条件渲染</div>
        <div>-------------------------------------------</div>
        
        <h1 v-if="ok">Yes</h1>

        <div>-------------------------------------------</div>
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            c
        </div>
        <div v-else>
            Not A/B/C
        </div>

        <div>-------------------------------------------</div>
        <h1 v-show="isShow">hhhhhh</h1>
    </div>
</template>

<script>
export default {
    data(){
        return{
            ok:false,
            type:'ooo',
            isShow:true
        }
    },

}
</script>

七.列表渲染（v-for）

列表渲染（也是模板语法中的指令）：v-for指令
用法1：v-for="item in items"  数组
用法2：v-for="(item,index) in items"  数组
用法3：v-for="(value,key) in object"  对象

<template>
    <div>
        <div>列表渲染</div>
        <div>---------------------------------------------</div>

        <ul id="example-1">
            <li v-for="item in items">
                {{item.message}}
            </li>
        </ul>

        <div>---------------------------------------------</div>
        <ul id="example-2">
            <li v-for="(item, index) in items">
                {{index}} - {{item.message}}
            </li>
        </ul>

        <div>---------------------------------------------</div>
        <ul id="example-3">
            <li v-for="(value, key) in obj">
                {{value}} - {{key}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            items:[
                {message:'Foo'},
                {message:'Bar'},
            ],
            obj:{
                'firstName':'John',
                'lastName':'George',
                'age':16
            }
        }
    }
}
</script>

八.事件处理器（v-on）

事件处理器（指令）：v-on指令（缩写是@）
例如：原始写法 v-on:click 缩写 @click


事件修饰符
.stop 阻止事件冒泡 （例如：<button @click.stop="doThis">dothis</button>）
.prevent 提交事件后不再重载页面
.capture 添加事件监听器时使用事件捕获模式，即在捕获模式下触发
.self 当前元素自身时触发处理函数时才会触发函数
.once 只触发一次
.passive

<template>
    <div>
        <div>事件处理器</div>
        <div>-----------------------------------------------------------</div>

        <div id="example-1">
            <button v-on:click="counter +=1">增加1</button>
            <p>这个按钮被点击了 {{counter}}次</p>
        </div>

        <div>-----------------------------------------------------------</div>

        <div id="example-2">
            <!-- `greet`是在下面定义的方法名 -->
            <button @click="greet">Greet</button>
        </div>

        <div>-----------------------------------------------------------</div>

        <div id="example-3">
            <!-- `say`是在下面定义的方法名 -->
            <button @click="say('hi')">say</button>
        </div>

        <div>-----------------------------------------------------------</div>

        <div @click="dothis2">
            <button @click.stop="doThis">
                <!--阻止了事件冒泡，所以只弹出doThis，不会再弹出dothis2-->
                <!--去掉stop，就是先弹出doThis，再弹出dothis2-->
                dothis
            </button>
        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            counter :0,
        }
    },
    methods:{
        greet(){
            alert('Greet');
        },
        say(h){
            alert(h);
        },
        dothis2(){
            alert('dothis2');
        },
        doThis(){
            alert('doThis');
        }
    }
}
</script>

九.表单控件绑定（v-model）

表单控件绑定（指令）：v-model指令在表单控件元素上创建双向数据绑定。

常用表单控件：
复选框
多个勾选框
选择列表

<template>
    <div>
        <div>表单控件绑定</div>
        <div>-----------------------------------------------------------</div>
        <input v-model="message" placeholder="edit me">
        <p>Message is :{{message}}</p>

        <div>-----------------------------------------------------------</div>
        <!-- 复选框 -->
        <!-- <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label> -->

        <div>-----------------------------------------------------------</div>
        <!-- 多个勾选框 -->
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames}}</span>

        <div>-----------------------------------------------------------</div>
        <!-- 选择列表 -->
        <div>
            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option >A</option>
                <option >B</option>
                <option >C</option>
            </select>
            <span>Selected:{{ selected }}</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            message:'hellowworld',
            checkedNames:[],
            selected:'',
        }
    }
}
</script>

希江木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(一)：基础语法（上）

简介框架作者：尤雨溪官网地址 https://cn.vuejs.org/github上面众多star数量组件化的、快速开发的特点最流行前端开发框架之一一.生命周期可结合官网看关于生命周期的知识beforeCreate 组件刚刚被创建创建前created 组件创建完成创建后beforeMount 挂载之前载入前Mounted 挂载之后（非常重要）载入后 ajax请求大部分会在mounted里面进行。 VUE是虚拟DOM，当需要对DOM
复制链接

扫一扫