渲染类型

刚接触一门编程语言或者框架,我们都应该先熟悉其基本语法,以及使用框架的基础步骤,即使你是编程高手,熟悉并且熟练使用这些语法之后,首先可以提高编码效率,其次,编码的过程中也会运用的得心应手,顺手拈来!

语法类型

学习基本语法,我们就以 <script> 标签引入html文件的方式来学习,这样对学习语法更加简洁直观,后边再学习到工程化之后再利用vue-cli来创建!

1. 声明式渲染

其实就是采用的是模板语法将数据渲染进DOM!

<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

通过在JS的data字段中声明message字段,然后通过{{ message }} 双大括号的形式将data中message的值渲染出来,这种方式vue官方成为声明式渲染!

Html元素的属性也可以通过vue提供的v-bind指令渲染到DOM中,这也属于声明式渲染的一类,在 Vue 中,所有带v-前缀的,都表示它们为 Vue 提供的特殊特性。

<div id="app">
    {{ message }}
    <span v-bind:title="spanTitle">我是一个span</span>
    <img v-bind:src="imgSrc" v-bind:alt="imgAlt">
</div>
      
<script>
var app = new Vue({
	el: '#app',
	data: {
          message: 'Hello Vue!',
          spanTitle: '我是span标签的title属性值!',
          imgAlt: '我是一个img的alt属性值',
          imgSrc: 'https://cn.vuejs.org/images/logo.png'
        }
      })
</script>

如上例所示,我们在data中声明了 spanTitleimgAltimgSrc三个数据,通过v-bind:指令将数据渲染进DOM!

这种声明式渲染的时候可能会因为网络卡顿,无法渲染出数据的时候会把模板语言标签直接渲染出来,或者本地刷新的时候会有一瞬间看见模板标签一闪而过的迹象,这种现象产生的原因是 Vue 尚未编译到关联实例的时候,指令还无法被解析而造成的。

Vue提供了一个v-cloak指令来解决这种闪烁问题。一般这个指令必须要配合CSS来使用!

<div v-cloak>
  {{ message }}
</div>

<style>
    [v-cloak] {
      display: none;
    }
</style>

2. 条件式渲染

Vue中的条件渲染主要指:v-ifv-show 两个指令!

  • 用法:
<div id="app">
	<div v-if="isIf === 1">
		isIf为1的时候展示:{{isIf}}
	</div>
	<div v-else-if="isIf === 2">
		isIf为2的时候展示:{{isIf}}
	</div>
	<div v-else>
		isIf不为1或者2的时候展示:{{isIf}}
	</div>
    
	<div v-show="isShow">
		当isShow为true的时候展示:{{isShow}}
	</div>
</div>
    
      <script>
        var app = new Vue({
          el: '#app',
          data: {
            isIf: 1,
            isShow: false
          }
        });
      </script>

v-ifv-show的区别是,v-if以条件判断是否渲染输出,后边可跟随v-else指令;而v-show则是通过控制元素的CSS的样式是否为display:none来控制数据是否显示! 

在浏览器控制台中通过app.isIf = 1/2/3 app.isShow = true 的方式来控制展示的效果。

3. 列表渲染

Vue的列表渲染指的是v-for指令,其实就是循环输出,采用item in items这种语法方式对数组或者对象的选项列表进行渲染!

遍历数组

  • 用法:
v-for="(item, index) in items"

其中 items 为数据源,item 为每一条数据的别名, index 是每条数据的索引,以数组为例索引即数组的下标,数组的下标总是从 0 开始!

  • 例子:
<div id="app">
        <ul>
            <li v-for="(item, index) in items" v-if="item.isShow" v-bind:key="index">
              <p>{{index}}</p>
              <p>{{item.name}}</p>
              <p>¥{{item.price}}</p>
            </li>
        </ul>
    </div>
  
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          items: [
              {
                  name: 'android',
                  price: '12.00',
                  isShow: false
              },
              {
                  name: 'js',
                  price: '13.00',
                  isShow: true
              }
          ]
        }
      });
    </script>

 

  • 控制台中通过 app.items[0].isShow = true 的方式,来控制第一条数据的展示!
  • 控制台中通过 app.items.push() 添加一条数据!
app.items.push({name: 'Vue', price: '28.00', isShow: true})

 

遍历对象

  • 语法:
v-for="(value, key, index) in dataSource"

v-for指令遍历对象其实就是将对象(dataSource)的属性进行迭代,每一条属性有三个参数 value(属性值)、key(属性)、index(属性的索引) !

  • 例子:
<div id="app">
    <ul>
        <li v-for="(value, key, index) in dataSource" v-bind:key="index">
          <p>
                {{ index }}. {{ key }}: {{ value }}
          </p>
        </li>
    </ul>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      dataSource: {
          name: 'Vue',
          price: '12.99',
          type: 'javaScript'
      }
    }
  });
</script>

 

  • 为dataSource对象添加一个新字段

语法:app.dataSource.newKey = 'newKey'

这种方式虽然成功的为对象添加了一个新字段,但没有被实时渲染出来,可以通过Vue提供的另外一种方式进行添加并实时渲染!

  • 实时为对象添加字段并渲染

语法:Vue.set(object, key, value)

用法:

Vue.set(app.dataSource, 'newKey', 'newKey')

 

  • 删除对象的某个字段

语法:Vue.delete(object, Key)

用法:

Vue.delete(app.dataSource, 'name')

 

注意观察,与上图比较name字段已经被删除!

下面列举一下 Vue 可以检测到的变化和无法检测到的变化。

  1. Vue 可以检测的变化
现有数据字段的变化:item[0].isShow = true;
通过Vue.set(object, key, value)的方式添加的属性
通过Vue.delete(object, Key)的方式删除的属性
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
filter()
concat()
slice()

 

  1. Vue 无法检测到的变化
利用索引去设置新的数据时:items[indexOfItem] = newItem;
直接修改数组的长度时:items.length = newLength;
直接去添加或删除对象的属性:app.dataSource.newKey = 'newKey'