今天给大家介绍一下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浏览器默认选不中第一个
今天的分享就到这里，请多多指教…
扫一扫
2160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
