20170926day01

一.Vue的简单概述

什么是框架？

框架指的是一套非常优秀可被反复使用的代码，帮助开发者解决一些复杂的问题

框架的好处？

提高了代码的复用率
降低模块之间的耦合度
提高开发速度
提高代码质量

Vue是什么？

它是一个实现UI层的渐进式js框架，所谓的渐进式就是你可以一步一步的，有阶段性的来使用Vue。在Vue.js的设计上采用MVVM(Modol-View-ViewModel)模式。

为什么学习Vue?

非常好的中文文档
学习曲线比较缓和（容易上手）
速度快
体积小
基于组件化（web component）的开发方式
代码的可读性、可维护性比较好

如何使用Vue？

搭建环境有两种方式：

方式1：CLI（command line interface 命令行窗口）

    #安装nodejs
        https://nodejs.org/en/
    #全局安装 vue-cli
     npm install --global vue-cli
    #创建一个基于 webpack 模板的新项目
     vue init webpack my-project
    #安装依赖，走你
     cd my-project
     npm install
     npm run dev

方式2：直接引入对应的js文件

二.Vue的基础使用

数据绑定

通过new的方式来得到了Vue的实例，在new通过一个对象来对Vue的实例配置（el，data)；el指的是页面中已经存在的DOM元素，可以写选择器。
接触了双花括号(mustache/interpolation)的语法:可以读取变量的值显示在调用的元素的innerHTML中

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>这是一个简单例子</title>
</head>

<body>
  <div id="container">
    <div>{{msg}}</div>
    <div>{{car.brand}}</div>
    <div>{{3+5}}</div>
    <div>{{count>totalNum?'数据超过限制了':'正常'}}</div>
    <div>{{!hasMore}}</div>
  </div>
  <script>
    new Vue({
      el: '#container',
      data: {
        msg: 'Hello VueJS',
        car: {
          brand: 'Volvo',
          price: 30
        },
        count: 2,
        totalNum: 10,
        hasMore: true
      }
    });
  </script>
</body>

</html>

三.Vue的常用指令

1.循环指令

1.<any v-for=" item in items"></any>，根据in关键词后的集合，去循环创建多个标签。

<!-- vue文件中-->
<ul>
    <li v-for="item in myList">
        {{item}}
    </li>
</ul>

//js文件中
export default {
  data() {
    return {
      myList:[100,200,300,400,500],     
    };
  }, 
};

2.<any v-for="(value,key) in items"></any>支持一个可选参数作为当前项的索引

<ul>
    <li v-for="(value,index) in myList">
        {{value}}-{{index}}
    </li>
</ul>

//js文件中
export default {
  data() {
    return {
      myList:[100,200,300,400,500],     
    };
  }, 
};

3.除数组外，对象属性也是可以遍历的（循环渲染学生列表示例）

<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
        <tr v-for="tmp in stuList">
            <td v-for="value in tmp">
                {{value}}
            </td>
           <!--<td v-for="(value,key,index) in tmp">遍历对象时有两个可选参数
                {{value}}
            </td>-->
        </tr>
    </tbody>
</table>

export default {
  data() {
    return {
      stuList: [{
          name: 'michael',
          sex: 1,
          age: 20
        },
        {
          name: 'miller',
          sex: 1,
          age: 21
        },
        {
          name: 'lincoln',
          sex: 0,
          age: 23
        },
        {
          name: 'lucy',
          sex: 1,
          age: 22
        },
        {
          name: 'hanmeimei',
          sex: 0,
          age: 19
        }
      ]
    };
  },
};

4.也可以迭代整数

<ul>
    <li v-for="n in 10">
        {{n}}
    </li>
</ul>

2.条件渲染

v-if

v-show="表达式" 根据表达式执行的结果的真假来切换display显示还是隐藏
<any v-if="表达式"></any>，v-if指令：根据表达式执行的结果的真假来选择是否要挂载到DOM。v-else-if要紧跟v-if，v-else要紧跟v-else-if或者v-if。

<p>{{msg}}</p>
<p v-if="isMember">仅会员可见</p>

<p v-if="answer=='a'">A</p>
<p v-else-if="answer == 'b'">B</p>
<p v-else-if="answer == 'c'">C</p>
<p v-else>D</p>

export default {
  data() {
    return {
      msg: 'Hello Vue',
      isMember: true,
      answer: 'c'
    };
  },
};

v-show

v-show="表达式" 根据表达式执行的结果的真假来切换display显示还是隐藏

<p>{{msg}}</p>
<p v-show="status===1">当status为1时显示</p>

export default {
  data() {
    return {
     status:1
    };
  },
};

v-show与v-if的用法基本一致，只是v-show是改变css属性display来控制元素显示的，v-if会根据表达式来适当的销毁和重建组件或事件。总之，v-if适合条件不经常改变的场景，因为它的切换开销比较大，v-show适用于频繁切换的条件。

数组更新

vue的核心是数据与视图双向绑定，修改数组时，vue会检测数据变化，vue包含一组观察数组变异的方法，使用它们会触发视图更新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()从这以上是会改变原数组的
filter()
concat()
slice()从这以上返回新数组但是可替换原来的数组

<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
        <tr v-for="tmp in stuList">
            <td>{{tmp.name}}</td>    
            <td>{{tmp.sex}}</td>   
            <td>{{tmp.age}}</td>        
        </tr>
    </tbody>
</table>

export default {
  data() {
    return {
      stuList: [{
          name: 'michael',
          sex: 1,
          age: 20
        },
        {
          name: 'miller',
          sex: 1,
          age: 21
        },
        {
          name: 'lincoln',
          sex: 0,
          age: 23
        }     
      ]
    };
  },
};

但是！下列变动的数组中vue无法检测也不会促发视图的更新
1.通过索引直接设置项目，比如this.stuList[3]={...}
解决办法两种
第一种：this.$set(this.stuList,3,{name:'xiaoni',sex:0,age:23});
第二种：this.stuList.splice(3,1,{name:'xiaoni',sex:0,age:23});
2.修改数组长度，比如this.stuList.length=1;
解决办法：this.stuList.splice(1);

Vue事件绑定

<any v-on:eventName="处理函数名字"></any>，通过v-on去给指定的事件绑定一个处理函数。v-on的简写为@。vue提供了一个特殊变量$event,用于访问原生DOM事件。

<p>{{msg}}</p>
<button v-on:click="handleClick">clickMe</button>
<button @click="handleClick">clickMe</button>
<button @click="click(1,$event)">clickMe</button>

<select v-on:change="handleChange">
    <option value="red">红色</option>
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
</select>


<form v-on:submit.prevent="handleSubmit">
    <input type="checkbox"/>是否同意本站协议<br/>
    <button>登录</button>
</form>

export default {
  data() {
    return {
      msg: 'Hello Vue',
    };
  },
  methods: {
    handleClick: function () {
      console.log('btn is clicked');
    },
    click(data,event){
     console.log(data);
   },
    handleChange: function (event) {
      //方法会默认将原生事件对象event传入
      console.log('选择了某个选项: ' + event.target.value);
    },
    handleSubmit: function () {
      console.log('提交事件被触发了');
    }
  }
};

Vue.js 为 v-on 提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符
.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

其他常用指令

1.v-bind将变量中的值通过 v-bind 绑定到元素指定的属性,简写是：

<p>{{msg}}</p>
<!-- v-bind实现将变量中值 绑定到属性-->
<img v-bind:src="'img/'+imgUrl"   style="width:80px;height:80px" />
<a v-bind:href="myLink">baidu</a>
<a :href="myLink">baidu</a>

<button @click="modifyBGColor">修改背景色</button>
<h1 v-bind:style="{backgroundColor:myBGColor}">
    背景色会被修改
</h1>

<p v-bind:class="{myRed:isRed}">我的字体颜色会变化</p>

<button v-bind:disabled="!isValid">clickMe</button>

<button v-show="hasMore">加载更多</button>
<p v-show="!hasMore">没有跟多数据可以加载了</p>

<div v-html="myHtml">it is a test</div>

export default {
  data() {
    return {
      msg: 'Hello Vue',
      imgUrl: '1.jpg',
      myLink: 'http://www.baidu.com',
      myBGColor: '#ff0000',
      isRed: false,
      isValid: false,
      hasMore: true,
      myHtml: '<h1>it is a header</h1>'
    };
  },
  methods: {
    modifyBGColor: function () {
      this.myBGColor = '#0000ff'
    }
  }
};

v-text

v-text='变量' 根据变量更新对应的文本内容

v-html

v-html="变量" 根据变量更新对应的innerHTML

Vue中的v-model

v-model指令本身就是一个双向数据绑定的指令：既可以将数据绑定到视图，又可以将视图中的结果绑定到数据。

<button @click="modifyMsg">修改msg</button>
<p>{{msg}}</p> 

<input type="text" v-model.lazy="userAddress"/>
<p>{{"用户输入的结果为"+userAddress}}</p>

<!-- 有两个输入框，一个按钮，
点击按钮时将输入框输入的数据进行求和，将结果输出在控制台-->
<input type="number" v-model.number="num1"/>
<input type="number" v-model.number="num2"/>
<button @click="addSum">add</button>
<input type="text" v-model.trim="myNotes"/>
<p>{{myNotes.length}}</p>

export default {
  data() {
    return {
      msg: 'Hello Vue',
      userAddress: '北京万寿路',
      num1: 0,
      num2: 0,
      myNotes: ''
    };
  },
  methods: {
    modifyMsg: function () {
      this.msg = 'Hello Data Binding';
    },
    addSum: function () {
      console.log(this.num1 + this.num2);
    }
  }
};

v-model的修饰符，用于控制数据同步的时机：

.lazy在输入框中，v-modal默认是在input事件中同步输入框的数据(除了中文输入法)，使用.lazy会转变为在change事件中同步，msg的信息不会实时改变，而是在失焦或者按回车时才会更新，示例代码如下：

<input type="text" v-model.lazy="msg"> 
<p>{{msg}}</p>

.number可以将输入转换为Number类型

<input type="text" v-model.number="msg"> 
<p>{{msg}}</p>

.trim 自动过滤输入的首位空格

<input type="text" v-model.trim="msg"> 
<p>{{msg}}</p>

Vue的简单概述,Vue的基础使用,Vue的常用指令-01

Vue的简单概述,Vue的基础使用,Vue的常用指令-01

一.Vue的简单概述

什么是框架？

框架的好处？

Vue是什么？

为什么学习Vue?

如何使用Vue？

方式1：CLI（command line interface 命令行窗口）

方式2：直接引入对应的js文件

二.Vue的基础使用

数据绑定

三.Vue的常用指令

1.循环指令

2.条件渲染

v-if

v-show

数组更新

Vue事件绑定

其他常用指令

1.v-bind将变量中的值通过 v-bind 绑定到元素指定的属性,简写是：

v-text

v-html

Vue中的v-model

v-model的修饰符，用于控制数据同步的时机：

推荐阅读更多精彩内容

Vue的简单概述,Vue的基础使用,Vue的常用指令-01

一.Vue的简单概述

什么是框架？

框架的好处？

Vue是什么？

为什么学习Vue?

如何使用Vue？

方式1：CLI（command line interface 命令行窗口）

方式2：直接引入对应的js文件

二.Vue的基础使用

数据绑定

三.Vue的常用指令

1.循环指令

2.条件渲染

v-if

v-show

数组更新

Vue事件绑定

其他常用指令

1.v-bind将变量中的值 通过 v-bind 绑定到元素指定的属性,简写是：

v-text

v-html

Vue中的v-model

v-model的修饰符，用于控制数据同步的时机：

推荐阅读更多精彩内容

1.v-bind将变量中的值通过 v-bind 绑定到元素指定的属性,简写是：