本篇文章给大家谈谈vue基础语法，以及vue的基础知识对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue基础简单介绍
• 2、Vue：基础语法、创建组件、组件间传值、实例生命周期
• 3、【Vue】vue基础知识一（本地数据操作）

vue基础简单介绍

vue是一款渐进式JavaScript前端框架，三大mvvm框架 vue , react ,angular

el: 选择目标标签

data: 数据

methods: 方法

computed: 计算

directives: 指令

watch: 监听

{{}}

v-text

v-html(渲染html文本)

v-bind:属性="指令的值"

例：

缩写：:属性="值"

指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 真 值的时候被渲染。

用于根据条件展示元素的选项是v-show指令

v-if隐藏时直接移除节点，v-show是通过css方式隐藏

频繁切换用v-show，一次性切换用v-if

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in list 形式的特殊语法，list是源数据数组

v-on:事件类型="响应函数"

简写：@click="say()"

行内事件响应：@click="num++"

.stop 阻止事件冒泡

.prevent 阻止默认事件

.once 只执行一次

.up

.down

.left

.right

.delete

.enter

.space

.esc

.tab

v-model 让表单的值与数据绑定在一起。他会根据空间类型自动选取正确的方法来更新元素

多选

{{checked}}

:class="值"

:class="{'key1':true,'key2':false}"

key1的值为真，key1会被绑定，key2不会

:class="[c1,c2,c3]"

:style="{color:'red','fontSize':'44px'}"

注意： 此时的属性名要去掉-连接符，且下一个字母要大写

例：fontSize字体大小

bind: 只调用一次，指令第一次绑定到元素时执行

inserted: 被绑定元素插入父节点时执行

update: 每更新执行一次

格式化数据

使用：

1、{{num | fix}}

2、{{num | fix(2)}}

3、v-text="num | fix"

两个状态间的过渡变化

vue动画需要在内置组件 transition/transition 包裹，会自动在动画的进入过程与离开过程添加类名，真正要实现动画，还需要自己写css

transition

name 名称

model 模式

in-out 先进再出

out-in 先出再进

enter-active-class 指定进入类名

leave-active-class 指定离开类名

transition-group

v-enter-active 进入过程

v-enter 进入前

v-enter-to 进入后

v-leave-active 离开过程

v-leave 离开前

v-leave-to 离开后

1、动画类6个css创建

2、keyframes 关键帧

3、引入第三方动画库 指定进入的class与离开的class

Vue.component("组件名",{template:``})

const steper = {template:``}

组件有且只能有一个根节点

steper/steper

Vue：基础语法、创建组件、组件间传值、实例生命周期

当我们看到vue指令后面跟着一个值得时候，这里的值就不再是一个字符串了，它指的是一定是一个JS的表达式

1、v-for：可以理解为for in，遍历数组返回给item，数组有多少内容就有多少个item，并自动生成html标签

2、v-on：绑定事件，语法=v-on：事件类型 = "函数(调用)"，调用的函数定义在methods中，vue会自动到里面寻找对应的函数去执行

3、v-model：数据的双向绑定，指定的数据需要在data里进行定义。当data里的该数据改变时，绑该数据的地方显示在页面的内容也会变化；当绑定的地方数据改变，data里的数据也会改变。其中一个改变另一个也会跟着改变。【在methods里定义的函数中，使用 this.数据 就可以访问到页面中该数据的内容】

4、v-bind：把数据传到子组件：v-bind：变量名=“接收值”  然后在子组件里的props中接收变量值

5、v-text=“name”；表示让这个标签的innerText变成data数据里name的内容，不会复制HTML结构，单纯转成文字，效果和插值表达式一样

6、v-html=“name”；让这个标签的innerHTML变成data数据里name的内容，会把HTML结构也复制上

创建全局组件的方法 Vue.component（“todo-item”， ｛｝） =》 "todo-item"为标签名

var 组件名（=标签名） = ｛｝  并且需要在实例中的components中注册组件才能使用

v-bind:index="index" 可以简写 :index="index"

v-on:click="hdd" 可以简写 @click="hdd"

给子组件绑定多个数据时：

todo-item :content="item" :index="index" v-for="(item, index) in list" @delete="hdd"

/todo-item

子组件里的props使用数组的形式接收数据 ，子组件事件处理this.$emit("delete",this.index)，之后在向外触发父组件的事件并传入index参数，再使用splice方法实现点击列表的某一项时该项被删除。

生命周期函数就是vue实例在某一个时间点会自动执行的函数。

生命周期函数不放在methods里面，而是直接放在Vue实例里面

【Vue】vue基础知识一（本地数据操作）

javaScript 框架

简化Dom的操作

响应式数据驱动

简单的vue程序：

1.导入开发版本的vue.is

2.创建vue实例对象，设置el属性和data属性

3.使用简介的模版语法把数据渲染到页面上

vue实例可以使用双标签挂载，不能使用HTML和BODy来进行

v-text . 设置标签的文本值 (覆盖标签中全部的内容 {{}} el只会替换相应的值)

v-html (1.内容中有html结构会被解析成标签 2.设置元素的innerHTML)

注：解析文本使用 v-text . 解析hml使用v-html

v-on(1.为元素绑定事件，2.事件名不需要写on,3.指令可以简写@ 4.绑定的方法定义在methods属性中5.方法内部可以通过this关键字访问定义data中的数据)

计数器（创建实例v-on事件和方法绑定，实时更改数据）

v-show(1.根据元素的真假切换元素的显示状态 2.原理是修改元素的display实现元素的隐藏)

v-if(1.根据表达式的真假切换元素的显示状态 2.本质是操作dom 3.表达式的值是true时，元素存在于dom树中，为否是从dom树中移除)

注：v-show和v-if的区别：

v-show：只是改变了display属性的操作

v-if：改变的是dom数

实际情况 频繁切换的使用v-show

v-bind (1.为元素绑定属性 2.完整写法v-bind:属性名 3.简写的话可以只写:属性名)

图片切换（1.用数组来存放元素 2.用v-on来绑定事件 3.用v-bing来修改元素的属性）

v-for(1.根据数据生成列表 2.v-for长和)

v-on (补充)（1.时间绑定的方法写成函数调用的形式，可以传入自定义参数

2.定义方法时定义形参数来接受传入的实参

3.通过.修饰符可以对事件进行限制）

例如：@keyup.enter

v-model(1.便捷的设置和获取表单元素的值

2.绑定的数据会和表单元素值相关联

3. 表单的 数据=绑定的数据)

记事本实战演练(1.增加 2.删除 3.隐藏 4.清空 )

注：shift()函数删除的是数组中的第一个元素 使用splice删除指定的某个元素

vue基础语法的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue的基础知识、vue基础语法的信息别忘了在本站进行查找喔。