时间: 2019-10-07阅读: 105标签: 规范块（Block）
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。MVVM框架
/* 常规写法和BEM写法相同 */.list
Vue.js的目的：1、解决数据绑定的问题 2、开发Single Page Application(SPA)大型单页面应用。主要支持移动端，也支持PC端。 3、支持组件化，这样复用度高
元素(Element)
MVVM模式：
块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。如上面的例子，li.item 是列表的一个子元素
M：model 业务模型，用处：处理数据，提供数据
/* 常规写法 */.list{}.list .item{}/* BEM写法 */.list{}.list__item{}
V： view 用户界面、用户界面
修饰符(modifier)
M->V V->M
一个“修饰符”可以理解为一个块的特定状态比如
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
多种颜色的按钮
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
.btn-list{}.btn-list .btn_red{}.btn-list .btn_green{}.btn-list{}.btn-list__btn_red{}.btn-list__btn_green{}
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
被激活的列表项
使用Vue.js步驟：1、引入Vue.js 2、创建一个Vue对象，其中el代表Vue管理对象的界限。data是一个对象，用于存放显示在页面上的数据。
.list{}.list.select{}.list .item{}.list .item.active{}.list{}.list_select{}.list__item{}.list__item_active{}
<!DOCTYPE html>
<html>
<head>
<title>test01.html</title>
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var appT=new Vue({
el: '#app',
data: {
message: 'Hello Vue.js123!'
}
})
</script>
</body>
</html>
书写原则
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。
原则上不会出现2层以上选择器嵌套
如果后台改动message时，相应的页面也会随之变化。使用appT.message=“XXX”更改。每个 Vue 实例都会代理其 data 对象里所有的属性
推荐写法
Vue指令，其实就是vue当中以v-开头的自定义属性。
ul li 第一项 div 我是名称/div span 看类名/span a href="#" 我是link/a li li 第二项 且 当前选择项 div 我是名称/div a href="#" 我是link/a li li 第三项 且 特殊高亮 div 我是名称/div a href="#" 我是link/a li/ul
.xxx{}.xxx__item{}.xxx__item_hightlight{}.xxx__product-name{}.xxx__link{}.xxx__ming-zi-ke-yi-hen-chang{}// 嵌套写法.xxx__item_current{ .xxx__link{}}
1、使用 v-html 指令用于输出 html 代码：
无意义的__
section h2 /h2 article h3 /h3 /article article h3 /h3 /article !-- ... -- /section
<body>
<div id="app" v-html="message"></div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>使用V-html</h1>'
}
})
</script>
</body>
用新的块来保存新元素
V-HTML
section h2 /h2 article h3 /h3 /article article h3 /h3 /article !-- ... -- /section
2、HTML 属性中的值应使用 v-bind 指令
这样做更有意义
命名空间
<body>
<div>
<a id="app" v-bind:href="url">{{text}}</a>
</div>
<script>
new Vue({
el: '#app',
data: {
url:'http://www.baidu.com',
text:'点击'
}
})
</script>
</body>
.l-: 布局(layouts)
v-bind:HTNL属性
.o-: 对象(objects)
.c-: 组件(components)
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
.js: js的钩子(JavaScript hooks)
3、v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
.is-|.has-: 状态类(state classes)
.t1|.s1: 排版大小(typography sizes)
<body>
<div>
<P id="app" v-if="seen">你看见我了！</P>
</div>
<script>
var appT=new Vue({
el: '#app',
data: {
seen:true
}
})
</script>
</body>
.u-: 实用类(utility classes)
v-if
该元素模块不存在了
4、v-show指令用来决定是否显示元素
<body>
<div id="app">
<p v-show="seen">你看见我了</p>
</div>
<script>
var appT=new Vue({
el: '#app',
data: {
seen:true
}
})
</script>
</body>
v-show
该元素模块被设置为display：none。
v-if跟v-show的区别：
v-if有更高的切换消耗，安全性更高。而v-show有更多的初始化渲染消耗。因此频繁切换而对安全性无要求可用v-show。如果在运行，条件不可改变，则用v-if比较好。
5、v-else必须跟在v-if后面，否则不能被识别。
<body>
<div id="app">
<p v-if="seen">你看见我了</p>
<p v-else>你看不见我了</p>
</div>
<script>
var appT=new Vue({
el: '#app',
data: {
seen:true
}
})
</script>
6、v-else-if
<body>
<div id="app">
<p v-if="type==='A'">A</p>
<p v-else-if="type==='B'">B</p>
<P v-else>C</P>
</div>
<script>
var appT=new Vue({
el: '#app',
data: {
type:'A'
}
})
</script>
</body>
View Code
7、在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
<body>
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
var appT=new Vue({
el: '#app',
data: {
message:'hello world'
}
})
</script>
</body>
V-MODEL
也就是说页面输入改动，对应的data数据也跟着改动
8、循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
<body>
<div id="app">
<ui>
<li v-for="person in persons">
{{person.name}},
{{person.old}},
{{person.sex}}
</li>
</ui>
</div>
<script>
var appT=new Vue({
el: '#app',
data: {
persons:[
{name:'wang1',old:'20',sex:'male'},
{name:'wang2',old:'21',sex:'female'}
]
}
})
</script>
</body>
View Code
9、v-for 可以通过一个对象的属性来迭代数据：
<body>
<div id="app">
<ui>
<li v-for="value in person1">
{{value}}
</li>
</ui>
---------------------------------------
<oi>
<li v-for="(value,key) in person2">
{{key}} --- {{value}}
</li>
</oi>
---------------------------------------
<ui>
<li v-for="(value,key,index) in person3">
{{index}}---{{key}}---{{value}}
</li>
</ui>
</div>
<script>
var appT=new Vue({
el: '#app',
data: {
person1:{name1:'wang1',old1:'20',sex1:'male'},
person2:{name2:'wang2',old2:'30',sex2:'female'},
person3:{name3:'wang3',old3:'40',sex3:'male'}
}
})
</script>
</body>
v-for
本文由10bet发布于Web前端,转载请注明出处：CSS的BEM规范学习
关键词：