Vue入门基础（el、data、v-text...）

何小幸
136 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天

el挂载点

var app = new Vue({
            el: "#app",
            data:{
                message:"hello!"
            }
  1. 作用范围：挂载元素及其内部任意嵌套的元素
  2. 选择器支持：支持id、类以及标签选择器等，但建议使用id选择器
  3. 标签支持：只支持双标签，不支持单标签，且不支持挂载dody和html标签

data数据对象

  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时，遵守js的语法即可
  • 注意不同的域要用逗号隔开

v-text

作用：设置标签的内容

        <h2 v-text="message"></h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

   	<script>
            var app = new Vue({
            el: "#app",
            data:{
                message:"hello!"
            }
        })
    </script>

用数据域里的元素替换掉对应v-text属性值标签内部的元素

一般要替换部分内容数据，会使用差值表达式：

<h2>{{message}} world!</h2>

这样就不会全部替换

<h2 v-text="message + '!'"></h2>
<h2>{{message + ",world"}}</h2>

在messaga后拼接字符串，输出拼接相同内容，可替换为其它逻辑表达式

v-html

会将数据字符串进行html解析，生成标签

data:{
      message:"<strong>111</strong>"
            }

v-on

为元素绑定事件

语法：v-on:事件名="方法" 或 用@代替v-on: => @事件名="方法"
其中事件名不需要写on
方法域：
methods:{
    doIt:function(){
        //...
    }
}
添加单个事件的方法：
@mouseenter="doIt"//不需要加括号
绑定多个不同事件的方法：
v-on = "{mouseenter:doIt,mouseout:changeMsg}"//以对象键值对的形式添加
绑定多个相同事件的方法：
@mouseenter="doIt();changeMsg()"//需要加括号

在方法内部通过this关键字可以访问定义在data中的数据

事件的后面跟上.修饰符可以对事件进行限制，比如@keyup.enter可以限制触发的案件为回车

当方法需要传参时，若依旧省略小括号，则Vue会默认将浏览器生产的event事件对象作为参数传入到方法的第一个参数中，第二个参数开始则为undefined。我们有时也通过这种方式来获取event对象

通过$event可以手动获取到event事件对象。

.stop 停止冒泡
​
.prevent 阻止默认行为（按钮点击提交）
​
.native 监听组件根元素的原生事件
​
.once 只触发一次回调

\

v-show

根据表达值得真假，切换元素的显示和隐藏，原理是修改元素的display样式

v-show = "true"
或
v-show = "isShow"（在data域中定义isShow的真假，也可用其它名称替代）
或
v-show = "age>=18"（可写表达式形式）

v-if

类似v-show，但原理是操纵dom对象，若操作频繁切换出现的元素用v-show，因为操纵dom对资源消耗较大

v-bind

设置元素的属性，如src、title、class等

v-bind:src="src" src在data域中定义
引号中可以是表达式，也可以采用对象的方式
v-bind:class="{active:isActive}"（active这个类名是否生效取决于isActive的值）
​
省略写法：只保留冒号
:src="src"

v-bind:calss

以对象的方式添加多个类，并用布尔值进行切换：

v-bind:class="{类名1: true,类名2: boolean}"

也可以将类对象作为方法返回值，写在methods中，在:class中调用方法来获取

数组语法用得不多，直接写死不如用普通方法定义

绑定style同样也有对象语法和数组语法之分，数组语法用得也很少

v-for

根据数据生成列表结构

v-for="item in arr"（遍历数组，生成多个li）
v-for="(item,index) in arr/objArr"（遍历数组/对象索引及内容，对象属性要通过点运算符来获取

v-model

获取和设置表单元素的值（双向数据绑定）

v-model原理

  1. v-bind绑定一个value属性
  2. v-on指令给当前元素绑定input事件
<input type="text" v-model="message">
//等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

radio类型使用v-model，绑定的是input中的value属性（补充：为radio类型添加name属性做到互斥）

checkbox类型做单选框使用v-model，绑定的是其布尔值（单选框没有给value属性）

checkbox类型做多选框使用v-model，绑定的是value属性，常与数组绑定，选中后value值会被加到数组中

select单选框，v-model绑定在select标签中，绑定的是option中的value

为select标签中定义multiple属性，就可多选，同样是常绑定数组进行操作

v-model修饰符

1、lazy修饰符：让绑定的数据在按下回车或失去焦点时再进行响应

2、number修饰符：使输入的数字以number数据类型储存

3、trim修饰符：过滤内容左右两边的空格

v-model.lazy="message"
v-model.number="message"
v-model.trim="message"

v-once

实现元素和组件只渲染一次，不会随着数据的改变而改变

v-pre

用于跳过这个元素和它子元素的编译过程，显示原本的Mustache语法（是啥就显示啥，和pre标签作用相似）

v-cloak

我们浏览器可能会直接显示出未编译的Mustache标签，用v-cloak进行隐藏，css样式中要写[v-cloak]{display:none;}

计算属性computed

其中方法取名常用名词形式，比如getFullName->fullName

在调用中，会将其当作一个属性来用，直接{{fullNmae}}便可访问此方法，使表述更简洁

计算属性中有getter和setter，getter取名为get，用于获取属性，一般省略不写，setter用于设置属性，需有一个参数，使用计算属性的点运算传参时会自动调用（不常用）

与methods对比：
  • computed—多次调用，一次执行
  • methods—多次调用，多次执行

过滤器属性filters

filters和methods一样定义在vue的options中，其内写方法，参数为要处理的内容

使用：

element | filterMethod //不加括号
avatar
文章
阅读
粉丝