vue学习（三）之基础知识

Vue.js基本代码

Vue之 - 基本的代码结构和插值表达式v-cloak

1. Vue基本代码结构

<script type="text/javascript" src="https://unpkg.com/vue"></script>

<div id="app">
   <p>{{ msg }}</p>
</div>
// 此为MVVC的V层

// new出来的vm对象，就是MVVM中的调度者
<script>
 var vm=new Vue({
      el:"#app",
      data:{
           msg:"Hello"
      },//data是MVVM的M，用于保存页面的数据
      methods:{}
});
</script>

在Vue的1.x版本可在body上增添id设置为el元素，成为Vue实例控制页面的区域
在Vue的2.x版本不可，而目前企业常用的为2.x版本

2. v-cloak
   如上例所诉，当网络慢的时候，刷新页面，会出现{{msg}}后出现Hello
   使用v-cloak解决方案如下：

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

<div id="app">
    <p v-cloak>{{ msg }}</p>
</div>

缺点：使用v-cloak会有数据的闪烁问题

Vue之v-text和v-html

• v-text解决v-cloak的数据闪烁问题，使用方法如下：
  <p v-cloak>{{ msg }}</p>
  改为

    <p v-text="msg"></p>

• v-text缺点，数据若是html，则会将其认为是string数据处理
  v-html解决v-text 的数据为html结构处理为string,使用方法如下：
  <p v-text="msg"></p>改为

    <p v-html="msg"></p>

Vue指令之v-bind的三种用法

1. v-bind(单向绑定变量)直接使用
2. 使用简化指令:
3. 在绑定的时候，拼接绑定内容：:title="btnTitle+',这是追加内容' "

Vue指令之v-on和跑马灯效果

• v-on用法

1. v-on(事件绑定)直接使用
2. 使用简化指令
3. 俩者实例如下：

<p v-text="msg"></p>

• 跑马灯效果实例示范

效果说明：页面有一个开始按钮、一个结束按钮、一段文字。点击开始按钮，文字的第一个字置于最后方；点击结束按钮，还原至最初模样

1. HTML结构

<div id="app">
    <input type="button" value="开启" v-on:click="go">
   <input type="button" value="停止" @click="stop">
   <p>{{info}}</p>
</div>

2. Vue实例

var vm=new Vue({
      el:"#app",
      data:{
           info:"Vue 学习ing"，
           intervalId：null
     },
     methods：{
		go(){
		     if(this.intervalId!=null)return;
		     intervalId=setInterval(function(){
			        this.info=this.info.substring(1)+this.info.substring(0,1)；
			},1000);
		},
		stop(){
		 clearInterval(this.intervalId);
		 this.intervalId=null;
		 this.info="Vue 学习ing";
		}
	}
});

Vue指令之事件修饰符

事件修饰符：

• .stop阻止冒泡
• .prevent阻止默认行为
• .capture添加事件侦听器时使用事件捕获机制
• .self只当事件在该元素本身（比如不是子元素）
• .once事件只触发一次

capture当子元素被点击时，父元素的点击事件含有事件修饰符capture，优先执行父元素的点击事件，不遵循向上冒泡原则

Vue指令之v-model和双向数据绑定

• v-model实现双向数据绑定，可监听到数据的改变，改变Vue的data数据。v-model只可用于表单元素
• 实例简易计算器案例如下：

1. HTML结构

<div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
      <option value="0">+</option>
      <option value="1">-</option>
      <option value="2">*</option>
      <option value="3">÷</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" v-on:click="getResult">
    <input type="text" v-model="result">
  </div>

2. Vue实例代码：

var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '0'
      },
      methods: {
        getResult() {
          switch (this.opt) {
            case '0':
              this.result = parseInt(this.n1) + parseInt(this.n2);
              break;
            case '1':
              this.result = parseInt(this.n1) - parseInt(this.n2);
              break;
            case '2':
              this.result = parseInt(this.n1) * parseInt(this.n2);
              break;
            case '3':
              this.result = parseInt(this.n1) / parseInt(this.n2);
              break;
          }
          /*
               var str="parseInt(this.n1)"+this.op+"parseInt(this.n2)";
			  this.result=eval(str);
		*/
        }
      }
    });

在Vue中使用样式

使用class样式

1. 数组

<h1 ：class="['red','thin']">这是一个邪恶H1</h1>

2. 数组中使用三元表达式

<h1 :class="['red', isActive?active:"", 'thin']">这是一个邪恶的H1</h1>

3. 数组中嵌套对象

<h1 ：class="['red','thin',{active:isActive}]">这是一个邪恶的H1</h1>

4. 直接使用对象

<h1 :class="{red:true,thin:true}">这是一个邪恶的H1</h1>

使用内联样式

1. 直接在元素上通过：style的形式，书写样式对象

<h1 :style="{color: red,'font-size': '40px'}">这是善良的H1 </h1>

2. 将样式对象定义到data中，直接引用

• 在data上定义样式

data:{
     h1StyleObj:{color: red,'font-size': '40px'}
}

• 在h1上引用

<h1 :style=h1StyleObj>这是善良的H1 </h1>

3. 在:style中通过数组，引用多个data上的样式对象

• 在data上的定义样式

data:{
     h1StyleObj:{color: red,'font-size': '40px'}，
     h2StyleObj:{fontStyle：'italic'}
}

• 在元素中，通过属性绑定，将样式对象应用到元素中

<h1 :style="[h1StyleObj,h2StyleObj]">这是善良的H1 </h1>

Vue指令之v-for和key属性

1. 迭代数组

<tr v-for="(item, i) in list">
	<td>索引：{{ i }}</td>
	<td>值：{{ item }}</td>
</tr>

2. 迭代对象中属性

<tr v-for="(value, key, i) in userInfo">
	<td>{{ value }}</td>
	<td>{{ key }}</td>
	<td>{{ i }}</td>
</tr>

3. 迭代数字

<tr v-for="i in 10">
	<td>{{ i }}</td>
	<td>{{ i }}</td>
</tr>

在2.20+的版本里，挡在组件中使用v-for时，key是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

当前展示没有key时，采用就地复用时的不便之处

选中的数据默认变为第一个数据。

将其代码修改下方所示，

<p v-for="item in arr" :key="item.id"> 
   <input type="checkbox" /> {{item.id}}---{{item.name}}
</p>

注意:key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

key 值只可以为number或者string

Vue指令之v-if和v-show

• 两者用法实例如下：

<p v-if="isBool">你好</p>
<p v-show="isBool">你好</p>

• 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-if 判定isBool为false时，源代码不出来p标签，因此需要多次重新渲染DOM树，有更高的切换消耗
v-show修改style的display值，具有更高的初始渲染消耗

案例：品牌管理

品牌管理包括：初始展示品牌、关键字筛选品牌、删除品牌、增添品牌。展示如下：

关键字筛选品牌

1. 1.x 版本中的filterBy指令，在2.x中已经被废除：

filterBy - 指令

<tr v-for="item in list | filterBy searchName in 'name'">

  <td>{{item.id}}</td>

  <td>{{item.name}}</td>

  <td>{{item.ctime}}</td>

  <td>

    <a href="#" @click.prevent="del(item.id)">删除</a>

  </td>

</tr>

2. 在2.x版本中手动实现筛选的方式：

• 筛选框绑定到 VM 实例中的 searchName 属性：

<hr> 输入筛选名称：

<input type="text" v-model="searchName">

• 在使用 v-for 指令循环每一行数据的时候，不再直接 item in list，而是 in 一个 过滤的methods 方法，同时，把过滤条件searchName传递进去：

<tbody>

      <tr v-for="item in search(searchName)">

        <td>{{item.id}}</td>

        <td>{{item.name}}</td>

        <td>{{item.ctime}}</td>

        <td>

          <a href="#" @click.prevent="del(item.id)">删除</a>

        </td>

      </tr>

    </tbody>

• search 过滤方法中，使用 数组的 filter 方法进行过滤：

search(name) {

  return this.list.filter(x => {

    return x.name.indexOf(name) != -1;
     /*
     if(item.name.includes(key)){
             return item;
      }
      includes是ES6的新方法：是否包含
	*/
  });

}

实际在以上的知识中处理图片数据，会使图片上的日期格式不对，下节记录过滤器（修改时间格式）、键盘修饰符（输入关键字后，点击特定键搜索数据）、自定义指令