今天给大家介绍一下Vue的一些基础知识和开发规范,
Vue基础
1.开发规范
1.1 工作目录构建规范
概述
为提高团队协作效率,规范文件管理,方便项目后期维护,提高代码质量
1.页面存放目录:文件夹命名均首字母大写
|--@root
|--Member //业务模块名
|--Conf
|--Controller //存放控制器
|--Veiw //存放页面
|--Basic //PC终端
|--Mobile //手机终端
|--Index //控制器名
|--index.php //页面
|--README.md
2.静态文件存放目录:所有文件及文件夹命名均为小写
|--@root
|--dist //存放编译后文件,用于测试
|--dev //存放编译后文件,用于开发;详见**3.静态文件输出目录**
|--basic
|--mobile
|--libs //第三方插件+
|--tmp //存放在页面中使用的图片,一般为可以后台上传的图片,页面调用路径为__PUBLIC__tmp/
|--index_index //页面文件夹
|--src //存放源码文件
|--basic
|--mobile //以mobile目录为例,basic目录同理
|--common //存放mobile终端下公用文件
|--images //存放图像文件
|--css //存放css文件
|--common.js //js文件直接存放在common文件夹下
|--index
|--member //业务模块名
|--common//业务公共模块
|--css
|--js
|--index.js
|--index_index //命名规范:控制器名_页面名(与HTML文件命名相同);存放页面私有文件
|--images
|--image.png
|--index.css
|--index.js
|--common //跨终端公共组件
|--package.json
|--webpack.config.dist.js //配置源文件,复制后重命名为webpack.config.js使用
|--README.md //项目介绍
3.静态文件输出目录:
|--@root
|--dist //输出同开发目录
|--dev
|--basic
|--mobile
|--images //存放图片
|--member //业务模块名
|--common.min.css
|--index_index.min.css
|--index_index.min.js
|--index_index.min.css.map //.map为源码映射文件,dist目录下不输出
|--index_index.min.js.map
|-ensure //异步加载文件
1.2 代码命名规范
1. BEM命名方式
BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思
想是将页面 拆分成一个个独立的富有语义的块(blocks),从而使得团队在开发复
杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护。在某种
程度上,BEM和OOP是相似的。
2、OOCSS
OOCSS不是一个框架,也不是一种技术,更不是一种新的语言,他只不过是一种方
法,一种书写方法,换句话说OOCSS其核心就是用最简单的方式编写最整洁,最于净的
CSS代码,从而使代码更具重用性,可维护性和可扩展性 ( 把原本写在一起的样式, 拆
开多个class 写,提高可复用性)
3. Eslint
eslint — js书写规范
代码检测,是否符合规范
ESLint 这样的可以让你在编码的过程中发现问题,并且可以自己创建检测规则,保持代码编写风格的一致性
一、安装依赖
cnpm i eslint -g
cnpm i eslint-plugin-vue -g
二、使用
使用方法一:
eslint --init npm中用命令新建eslintrc.js文件
eslint yourfile.js npm中用命令检查自己文件中的错误
使用方法二:
手动在项目的根目录下新建eslintrc.*文件(.js、.json、.yaml、.yml等),进行配置(具体配置规则详见下文),即可在安装好eslint的编辑器中查看到出现错误的位置。
2. Vue介绍
构建数据驱动的web应用开发框架
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层
便于与第三方库或既有项目整合
Vue 不支持 IE8 及以下版本
3. MV* 模式
MVC框架最早出现在Java领域,然后慢慢在前端开发中也被提到,后来又出现了MVP,以及现在最成熟的MVVM。
MVC
model 数据模型
view 视图
controller 控制器
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写
用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
View(视图)是应用程序中处理数据显示的部分。
Controller(控制器)是应用程序中处理用户交互的部分。
优点:耦合性低、重用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理
缺点:由于模型和视图要严格的分离,这样也给调试应用程序带来了一定的困难。每个构件在使用之前都需要经过彻底的测试。
MVP
model
view
presenter
MVP是单词Model View Presenter的首字母的缩写,分别表示数据层、视图层、发布层,它是MVC架构的一种演变。作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会直接从Model中读取数据而不是通过 Controller。
MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。
各部分之间的通信,都是双向的。
View 与 Model 不发生联系,都通过 Presenter 传递。
View 非常薄,不部署任何业务逻辑,称为”被动视图”(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
MVVM
model
view
viewmodel
MVVM(Model View ViewModel)是一种基于MVC的设计,开发人员在HTML上写一些Bindings,利用一些指令绑定,就能在Model和ViewModel保持不变的情况下,很方便的将UI设计与业务逻辑分离,从而大大的减少繁琐的DOM操作。
Model代表我们整个webapp所需要的数据模型,一个典型的例子就是用户信息Model,它应该含有(姓名,年龄等属性)。Model含有大量信息,但它并不具有任何行为逻辑,它只是数据,因而它不会影响浏览器如何展示数据。
MVVM中View是具有主动性的,因为它包括了一些数据绑定,事件,和行为,这些都会直接影响Model和ViewModel的。它不但负责保持View自身的行为(展示),而还会将自身的变化同步到ViewModel中。
可以把ViewModel看作一个藏在View后面的好帮手,它把View需要的数据暴露给它,并且赋予View一定的行为能力。
4 Vue实现数据绑定的原理
Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题
4.1 vue中数据双向绑定的体现
{{ msg }}
<div id="app">
<p>v-model属于vue中表单数输入的一个指令,实质是一个属性,属性的值是一个变量 msg</p>
<input type="text" v-model="msg"/>
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app', // 找到那个DOM节点内要使用vue语法
data: { // 初始化的数据
msg: 'hello vue'
}
})
</script>
4.2 vue数据双向绑定原理
vue数据双向绑定是通过 数据劫持 结合 发布者-订阅者模式 的方式来实现的
数据劫持的实现方式 Object.defineProperty()
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
var Book = {
name: '124436466'
};
var name = "";
console.log(Book.name) // 124436466
Object.defineProperty(Book, 'name', {
set (value) {
name = value;
console.log('你取了一个书名叫做' + value) // 你取了一个书名叫做123 },
get () { return '《' + name + '》'
}
})
console.log(Book.name) // 《》 ---- 调用的是get方法
Book.name = '123' // 相当于调用的是set方法
console.log(Book.name) // 《123》
console.log(Book)
原理
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
5 模板语法
5.1 文本
{{ msg }} --- {{ num }} --- {{ flag }} --- {{ obj.a }} ---- {{ obj.b }} -- {{ arr[3] }} --- {{ nu }} --- {{ un }}
data: { // 初始化数据,可以定义很多个,可以定义各种数据类型
msg: 'hello vue',
num: 1,
flag: true,
obj: {
a: 1,
b: 2
},
arr: [1, 2, 4, 5],
nu: null,
un: undefind
}
5.2 纯HTML
v-html vue提供的一个指令,相当于原生js中的 innerHTML 的功能,相当于jQuery中的().html() v-text vue提供的一个指令,相当于原生js中的 innerText 的功能,相当于 jQuery 中的().text() ,一般会用 文本 形式代替 {{ msg }},
作用: 防止XSS,CSRF
用途:传递的代码中如果有HTML标签,并且需要解析的时候,比如说 详情页面 的 详情部分 ,一搬后台会返回带有图文的一些HTML代码
<div v-html="msg"></div>
data: {
msg: '<h1>hello vue</h1>'
}
5.3 表达式
{{ sex == 0 ? '女' : '男' }}
{{ msg.split('').reverse().join('*') }}
data: {
sex: 0,
msg: 'hello vue'
}
赞成使用三元(目)运算符,不赞成写其余的业务逻辑,不是必须,此案例使用vue的过滤器(filter)实现
5.4 指令
vue中含有v-前缀的特殊属性 ---- 指令
input中使用v-model ,就会把它的值当做是输入框的value值
标签上v-html,就会把它的值插入到该标签内部 v-text
v-if 条件判断 v-else-if v-else
v-show 条件判断
v-for 遍历循环使用
v-on 绑定事件
v-bind 绑定属性
v-slot 缩写:#,提供具名插槽或需要接收 prop 的插槽
v-pre 跳过这个元素和它的子元素的编译过程
v-cloak 这个指令保持在元素上直到关联实例结束编译
v-once 只渲染元素和组件一次
5.5 缩写
- 事件简写形式 v-on:click =》 @click
< button οnclick=“fn()”>click< /button> ---- 原生js
< button v-on:click=“fn()”>click< /button> — vue
<button @click=“fn()”>click — vue简写
- 属性的简写形式 v-bind:class =》 :class
< div class=“test”>< /div> — 原生,test就是一个固定的值
< div v-bind:class=“test”>< /div> — vue中,test可以是一个变量
< div :class=“test”>< /div> — vue简写形式
5.6 绑定属性
绑定属性必然跟标签相关
适合场景
- img 的 src 属性(从服务器获取了地址)
- 组件间的传值
<div id="app">
<div msg="msg">原生的属性,只能是定值</div>
<div v-bind:msg="msg">利用vue的绑定属性,给一个名为msg的属性,添加了一个值为msg的变量</div>
1<img src="img" alt="">
2<img v-bind:src="img" alt="">
</div>
const app = new Vue({
el: '#app',
data: {
msg: 'hello vue',
img: 'https://cn.vuejs.org/images/logo.png'
}
})
6 class与style绑定
6.1 class 绑定
如果数据来源是后端提供的 class 的名字,前端不能操控,就需要使用class语法
对象语法
<style>
.active {
font-size: 40px;
color: #f66;
}
</style>
<div :class="{active: isActive}">如果vue项目中的active样式是由flag的值控制的</div>
<script>
new Vue({
el: "#app",
data: {
isActive:true
}
})
</script>
数组语法
<style>
.active{
font-size:26px;
color:#99f;
}
.active2{
font-size:26px;
color:#f99;
}
</style>
<div :class="[activeClass, testClass]">数组写法就是先把数据定义好,直接数组包裹即可</div>
<script>
new Vue({
el: "#app",
data: {
isActive:true,
activeClass: "active",
testClass: "active2"
}
})
</script>
6.2 style 绑定
对象语法
<div :style="{color:styleColor,fontSize:styleSize + 'px'}">
style语法之对象语法
</div>
<script>
new Vue({
el: "#app",
data: {
styleColor: "#9f9",
styleSize: "26",
fontWeigth: "700"
}
})
</script>
数组语法
<div :style="[styleObj,styleObj2]">
style数组的方法
</div>
<script>
new Vue({
el: "#app",
data: {
styleObj:{
color: 'purple',
fontSize: '26px'
},
styleObj2: {
fontWeight: "700"
}
}
})
</script>
7 条件判断
v-if v-else-if v-else
v-show
v-if 渲染还是不渲染 ---- 运行时消耗更大
v-show 显示还是隐藏 ----- 初始渲染消耗更大
<div id="app">
<div v-if="flag">为真显示</div>
<div v-else>为假显示</div>
{{ cont }}
<div v-if="cont < 3">0-3</div>
<div v-else-if="cont < 6">3-6</div>
<div v-else-if="cont < 9">6-9</div>
<div v-else>9-10</div>
<div v-show="flag">为真就显示</div>
<div v-show="!flag">为假就显示</div>
</div>
<script>
new Vue({
el: "#app",
data: {
flag: 0,
cont: Math.random() * 10
}
})
</script>
8 循环遍历
v-for = “item of/in list” :key=“唯一性的值”
v-for = “(item, index) of/in list” :key=“index”
可以遍历数组,可以遍历对象,还可以遍历字符串,一定要记得加 key 值
<div id="app">
<button @click="arrFn">操作list</button>
<p v-for="(item,index) of list" :key="index">
{{ item }}
</p>
<ul>
<li v-for="item of arr" :key="item.id">
{{ item.title }}
<dl>
<dd v-for="(itm,inx) of item.data" :key="inx">
{{itm }}
</dd>
</dl>
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
list: ["a","b","c","d"],
arr: [
{id: "1", title: "t1", data: ["a1",'a2',"a3"]},
{id: "2", title: "t2", data: ["b1",'b2',"b3"]},
{id: "3", title: "t3", data: ["c1",'c2',"c3"]}
]
},
methods: {
arrFn () {
// this.list.push("A") //尾加
// this.list.pop() //尾减
// this.list.unshift("A") //头加
// this.list.shift() //头减
this.list.splice(0,1)
}
}
})
</script>
9 事件处理
v-on:click @click v-on:change @change
v-on:click=“fn()”
v-on:click=“fn($event)”
v-on:click="fn(‘params’)
v-on:click=“fn(msg)” msg为变量
事件处理
一般不要轻易使用事件对象 $event
那么如果需要阻止冒泡以及默认事件呢,vue提供了修饰符
9.1 事件修饰符
阻止冒泡 v-on:click.stop=“fn()”
阻止默认事件 v-on:click.prevent=“fn”
阻止冒泡阻止默认事件 v-on:click.stop.prevent=“fn”
.capture 添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。
9.2 按键修饰符
以前如果有一个表单输入框,当你输入之后敲回车想要打印值
<input onchange="fn(event)" id="name" />
if (event.keyCode === 13) {name.value}
vue
<input @change.enter="fn()" id="name" />
.tab
.delete
.esc
.space
.up
.down
.left
.right
9.3 系统修饰符
.ctrl
.alt
.shift
.meta
10 表单输入绑定
v-model
<div id="app">
<input type="text" placeholder="用户名" v-model="username">{{ username }}<br>
<input type="text" placeholder="密码" v-model="password">{{ password }}<br>
<input type="radio" v-model="sex" value="1">男
<input type="radio" v-model="sex" value="0">女<br>
<input type="checkbox" v-model="hobby" value="1">吃饭
<input type="checkbox" v-model="hobby" value="2">睡觉
<input type="checkbox" v-model="hobby" value="3">打豆豆<br>
<select v-model="city">
<!-- 第一个是为了兼容 --- 苹果的safar浏览器默认选不中第一个 -->
<option disabled>请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">杭州</option>
</select><br>
<textarea v-model="note"></textarea><br>
<input type="checkbox" v-model="flag">同意此协议<br>
<input type="button" value="提交" @click="getInfo">
</div>
<script>
new Vue({
el: "#app",
data: {
username: "beyond",
password: "123",
sex: "1",
hobby: ['1',"3"],
city: "2",
note: "",
flag: true
},
methods: {
getInfo () {
const obj = {
username: this.username,
password: this.password,
sex: this.sex === "1" ? "男" : "女",
hobby: this.hobby,
city: this.city,
note: this.note,
flag: this.flag
}
if(!this.flag){
alert("请勾选协议")
return
}
console.log(obj)
}
}
})
</script>
这里有两个特殊的点:
1.checkbox
- 如果初始值为 数组,则表示多选框
- 如果初始值为 boolean,则表示真假
2.< option disabled>请选择< /option>
第一个是为了兼容 — 苹果的safar浏览器默认选不中第一个
今天的分享就到这里,请多多指教…