CSS的BEM规范学习

来源:http://www.chinese-glasses.com 作者:Web前端 人气:198 发布时间:2020-04-15
摘要:时间: 2019-10-07阅读: 105标签: 规范块(Block) Vue.js(读音 /vjuː/, 类似于 view)是一套构建用户界面的渐进式框架。MVVM框架 /* 常规写法和BEM写法相同 */.list Vue.js的目的:1、解决数据绑定的

时间: 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 代码:

无意义的__

图片 1图片 2

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 指令

这样做更有意义

图片 3图片 4

命名空间

<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)

图片 5图片 6

.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

该元素模块不存在了图片 7

 

4、v-show指令用来决定是否显示元素

 

图片 8图片 9

 <body>
    <div id="app">
          <p v-show="seen">你看见我了</p>
    </div>
    <script>
        var appT=new Vue({
              el: '#app',
              data: {
            seen:true
          }
        })
    </script>
 </body>

v-show

图片 10

该元素模块被设置为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

图片 11图片 12

<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 指令来实现双向数据绑定

图片 13图片 14

<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 可以绑定数据到数组来渲染一个列表:

图片 15图片 16

<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 可以通过一个对象的属性来迭代数据:

图片 17图片 18

  <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规范学习

关键词:

最火资讯