vuejs基础玩法(基础知识,大神勿骂!)

原创 zxsclq 随笔 前端基础 803阅读 2018-02-05 15:48:41 举报

前言
Vuejs相关教程,可参阅网站,先熟悉vue.js的基本语法。本文档讲述,以CDN的方式(在页面上,引入相关的js和css文件),来实现。
本文档适用于vuejs初学者,之前给公司实习生学习准备的,很多相关知识暂不全,敬请谅解。
1 页面结构
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。简单来说,最基本结构如下就是:

这里边body的最外层的div,需要在下边进行实例化。当然最外层用的是id='app',实例化的时候,el:'#app'。跟css类似,如果最外层用class来标识的时候,里边#换成“点”。但是为了避免重复,统一用“id”来标识。
2 基本模块

上半边省略,直接上js代码

data: 页面初始化时,定义的元素模块,也是数据的容器,每一个栏位都会用到,类似于之前的普通写法里边的name,id等,但是比那个强大。
filters:这一块是过滤器,一般是处理数据用的。
mounted:页面加载是调用的方法,这便涉及到Vuejs的生命周期,大家可以去了解。根据不同情况调用,我自己遇到过关于图表方面,家在先后顺序的问题。
watch: 用于页面模块的数据监听。数据发生改变的时候,页面展示进行切换。
methods:事件方法都写在这个里边。例如点击事件。
正常情况下,页面结构就是上边的属性,当然顺序调换也未尝不可,看个人习惯。除了data外,其他模块用不到的,可以去掉。
3.vue.js常用的指令

文本指令
常用的数据绑定,双大括号的形式。{{ ··· }}
v-text 纯文本的方式展示出来
v-html 会解析你数据里边带的标签,以及样式,事件等等
v-model 功能最全,你把v-model放到input里边的时候,你会发现,你的input这个栏位,跟其他几个,message变成了双向绑定,你改变input里边的值,其他的值会跟着一起变动

运行上边的结果你会发现,{{···}}和“v-text”这种方式,会把message所有的东西输出,v-html会解析message里边的html标签,而v-model会绑定,message里边的数据,当你改变input里边的数据,页面上其他的数据也会相应改动。

v-bind指令
html中的属性值,通常会用到这个指令,例如以下的class。v-bind:class=[class1,{‘class2’:A},{‘class3’:B}] 其中,class1为一直生效,class2和class3必须根据A,B对应的布尔值来展示,true的时候生效,反之不生效。 指令简写可以直接是”:class”,省去前边的v-bind.

(这种情况,可用于,按钮点击,更换状态,样式等)
v-if(v-else-if,v-else)指令
主要是在页面上给出相应的条件,例如

跟普通的if..else..语句的写法基本类似,也可以进行嵌套。
v-for指令,数据循环,基本写法

也可以加嵌套,二维数组使用,限定结构一致

vuejs,2.0中,v-for循环也可以加键名和索引,例如:

value为对应字段行。key为键名,index为索引。这三个只是顺序,不带表真实参数,你写ABC下边双括号也写ABC也可以

循环的时候,我们可以写在v-model,或者有图片的时候,我们可以写在:src上
例如:<input v-model="item.name">
<img :src="item.name">
标签中不允许带双括号。例如,以下这种写法
<img :src="{{item.name}}">
4.vue.js常用事件

点击事件
常用事件声明为v-on:click=”hello()”,无参数,可以不带括号,有参数写括号中。简写方式@click=”hello()”,事件写在methods:{ ~~~ }里边。格式如下

事件是可以继承的,简单来说,比如一个事件,我们需要在页面上调用多次,我们可以直接进行事件继承。

监听事件
监听事件,当栏位值发生改变的时候,使用。,原来的js采用的是change事件,vuejs也可以用@change=””的方式来写,这样的话写在,跟点击事件一样,写在methods:{ ~~~ }里边。

但是部分框架,@change这种方式不兼容,所以我们一般直接用v-model进行绑定,写在watch:{ }里边,例如:

过滤器
过滤器写在filters:{}里边,一般对数据进行处理的时候会用得到。直接在文本后边加上“|”,然后跟这写,事件名。例如

评论 ( 2 )
最新评论
zxsclq 1F 2018-02-05 16:59:02 2F

没呢,我这写的用法很浅,应该很容易就能理解。

jieshuai 2018-02-05 16:41:21 1F

很厉害