【文件属性】:
文件名称:vue语法.rar
文件大小:156KB
文件格式:RAR
更新时间:2022-09-05 04:50:23
vue语法
二、Vue的数据驱动---mvvm模式的介绍
Vue是一款轻量级的渐进式前端框架,主要功能:
1、模板渲染/数据同步
2、组件化、模块化
3、扩展功能:路由 等等
Vue资源:
中文官网:https://cn.vuejs.org/
Github源码:https://github.com/vuejs/vue
MVVM:
M:Model数据模型 负责数据存储
V:View视图 负责页面的显示
VM:View Model负责业务处理,对数据进行加工,之后交给视图
Vue1 下载地址:http://v1-cn.vuejs.org/js/vue.js
Vue2 下载地址:https://unpkg.com/vue@2.2.1/dist/vue.js
三、Vue常见指令介绍上
1、插值表达式
{{}}
当模型中的数据发生改变时,那么视图中的数据也对应的发生改变。
2、v-text
将一个变量的值渲染到指定的元素中
3、v-html
可以真正输出html元素
4、v-model
实现双向数据绑定
5、v-build
绑定页面中元素的属性
6、v-if和v-show
v-if
作用:判断是否加载固定的内容,如果是真,就加载,如果是假,就不加载;
语法:v-if='判断表达式'
v-show
作用:判断是否显示内容
语法:v-show='判断表达式'
v-if和v-show的相同点和不同点
1.相同点:都可以实现对于一个元素的显示与隐藏操作
2.不同点:v-if是将元素添加或移出dom树模型中,v-show只是在这个属性上添加display:none而已。
3.v-if有更高的切换小号,安全性高。v-show初始化消耗大点。所以,如果需要频繁切换并对安全性没有要求时,
可以用v-show。如果在运行时,条件不可能改变的话,使用v-if更好点。
7、v-for
作用:控制html元素中的循环
语法:v-for="item in 集合"
8、v-on
作用:对页面中的事件进行绑定
语法:v-on:事件类型 = '监听器'
缩写@事件类型='监听器'
四、Vue常用的组件使用
组件是vue.js中一个非常强大的功能,可以扩展HTML元素,封装可重用的代码。
1、将组件内容定义到template模板中
2、组件中实现指令以及事件绑定
五、组件间的传值
1、父组件传值给子组件
2、子组件传值给父组件
六、Vue-router路由的基本使用上
在一个系统或App中,由多个页面组成,通常会使用vue中的组件来实现,那么从一个页面跳转到另一个页面时,
通过url路径来实现的,哪个url对应哪个页面,在vue中是通过vue-router来实现
Vue-router在vue2.0中的使用、
配合vue1.0使用的版本的帮助文档地址:
https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
配合vue1.0使用的vue-router下载地址:
https://cdnjs.doubflare.com/ajax/libs/vue-router/0.7.10/vue-router.min.js
配合vue2.0使用的版本的帮助文档地址:http://router.vuejs.org/zh-cn/installation.html
配合vue2.0使用的vue-router下载地址:https://unpkg.com/vue-router/dist/vue-router.js
七、路由的传值
vue2.0的路由参数定义实现url的传值
八、ECMAScript6
九、let使用
let是申明变量的关键字
1、在相同的作用域内,let不能重复申明一个变量
2、let申明的变量不会被预解析
3、暂时性死区(变量在let声明前都不能访问,为了防止先调用后声明这个现象)
十、let与for的使用
1.块级作用域
let声明的变量拥有块级作用域,块级作用域是一对大括号
块级作用域可以直接些一堆大括号,以后就不用写自执行函数了
2.var与for循环
3.let与for循环
十一、const的用法
const声明一个常量,一旦声明后就不能修改了
1.如果声明后再去修改的话就会报错
2.只声明不赋值也会报错
3.只能先声明后使用,不会被提前解析
4.不能重复声明一个常量
注意:const声明的对象中属性是可以修改的
十二、结构赋值-数组
结构赋值
按照一定的模式,从数组或者对象中把数据拿出来,对变量进行赋值
数组结构赋值
等号左边与右边必须都是数组,数组的结构赋值要一一对应。如果对应不上的话就是undefind
十三、对象结构赋值
对象结构赋值
等号左边与右边必须都是对象,名字要一一对应,顺序不需要对应,对应不上的值结果是undefind
十四、字符串模板
1.字符串需要用一堆反引号包裹起来,它可以定义多行字符串,只用一堆反引号
2.要拼进去的数据需要放在${}里面
3.大括号里面还可以进行运算
4.大括号里面可以调用函数
十五、箭头函数
语法:
1.function用var、let、const来表示
2.参数要卸载第一个等号后面
a.如果没有参数,需要写一堆空的小括号
b.只有一个参数,那就直接写,不用加括号
c.参数有多个,需要加一个小括号,参数用逗号隔开
3.函数的主题内容是放箭头后面,
如果语句只有一条,那就直接写;
如果语句有多条,需要把他们放在一堆大括号里 。
十六、rest参数
rest参数 ...变量名
rest参数是一个数组,他的后面不能再有参数,不然会报错
扩展方法...
1.三个点后面是一个类数组,它的作用是把这个类数组转成真正的数组,但是它需要放到一对中括号里面
2.三个点后面是一个真正的数组,它的作用是把数组转成一个普通集合数据,不需要加中括号
十七、Symbol介绍
新增的第7中数据类型,表示独一无二。用来作为属性名,能保证不会与其他的属性名冲突
1.它是通过Symbol函数生成的
2.它的前面不能用new,因为它生成的是一个原始类型的数据,不是对象
3.它可以接受一个参数,为了便于区别。及时长的一样他们也不同
4.它不能与其他的值进行运算,没有隐式转换
5.它的值可以被转换成布尔值或字符串,不能转换成数字
十八、set数据结构
set数据结构,类似数组,所有的数据都是唯一的,没有重复的值。它本身是一个构造函数
size数据长度
add()添加一个数据
delete()删除一个数据
has()查找某条数据,返回一个布尔值
clear()删除所有数据
十九、map数据结构
map数据结构,类似于对象。键值对的集合,所有输一局都是唯一的,不会重复。每条数据都需要放在一个数组中
它本身就是一个构造函数
size()数据的长度
set()添加一条数据
delete()删除一条数据
get()获取一条数据
has()查找某条数据,返回一个布尔值
clear()删除所有数据
二十:教学视频
【文件预览】:
vue语法
----12,父组件传值给子组件.html(665B)
----09,v-on.html(615B)
----16,let与for.html(806B)
----22,Symbol.html(490B)
----vue1.js(276KB)
----18,结构赋值-数组.html(448B)
----08,v-for.html(670B)
----03,v-text.html(482B)
----20,字符串模板.html(1023B)
----vue2.js(243KB)
----00,讲义.txt(7KB)
----23,set.html(560B)
----01,MVVM模式,数据双向绑定.html(579B)
----06,v-bind.html(465B)
----15,箭头函数.html(660B)
----.project(664B)
----05,v-model.html(494B)
----15,路由的传值.html(1KB)
----02,插值表达式.html(415B)
----04,v-html.html(489B)
----11,组件的使用和事件的绑定.html(807B)
----vue-router.js(73KB)
----21,rest.html(619B)
----24,map.html(609B)
----14,路由的使用.html(1KB)
----19,对象结构赋值.html(536B)
----10,组件的使用.html(577B)
----13,子组件传值给父组件.html(755B)
----17,const用法.html(547B)
----07,v-if和v-show.html(579B)