vue.js学习笔记

一、Vue概述

通过我们学习的html+css+js已经能够开发美观的页面了，但是开发的效率还有待提高，那么如何提高呢？我们先来分析下页面的组成。一个完整的html页面包括了视图和数据，数据是通过请求从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显，这就需要我们使用DOM操作。
正因为这种开发流程，所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想，
即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？
MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：
Model: 数据模型，特指前端中通过请求从后台获取的数据
View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展
示到视图（View）上

如图所示就是MVVM开发思想的含义

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架
不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
框架即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

二、快速入门

1.引入vue.js文件，代码如下：

<script src="js/vue.js"></script>

2.在js代码区域定义vue对象,代码如下：

<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
message: "Hello Vue"
}
})
</script>

在创建vue对象时，有几个常用的属性：
el: 用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data: 用来定义数据模型
methods: 用来定义函数。这个我们在后面就会用到

3.在html区域编写视图，其中{ {}}是插值表达式，用来将vue对象中定义的model展示到页面上
的

<div id="app">
        <input type="text" v-model="message">
        {
  
  {message}}
        </div>

三、Vue指令

在上述的快速入门中，我们发现了html中输入了一个没有学过的属性 v-model ，这个就是vue的指
令。
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
在vue中，通过大量的指令来实现数据绑定到视图的，所以接下来我们需要学习vue的常用指令，如下表
所示：

指令	作用	示例代码
v - bind	为HTML标签绑定属性值，如设置href, css样式等	`<a v - bind:href = "url">Link</a>`，假设在Vue实例中有`data: {url: 'https://example.com'}`
v - model	在表单元素上创建双向数据绑定	`<input v - model = "message" type = "text">`，`Vue实例中有data: {message: ''}`，输入框中的值与`message`双向绑定
v - on	为HTML标签绑定事件	`<button v - on:click = "handleClick">Click Me</button>`，在Vue实例中有`methods: {handleClick: function () {console.log('Button clicked');}}`
v - if	条件性的渲染某元素，判定为true时渲染,否则不渲染	`<div v - if = "isShow">This div will be rendered if isShow is true</div>`，假设在Vue实例中有`data: {isShow: true}`
v - else	与v - if搭配使用，在v - if条件不成立时渲染	`<div v - if = "isShow">Yes</div><div v - else>No</div>`，假设在Vue实例中有`data: {isShow: false}`
v - else - if	与v - if搭配，用于多个条件判断	`<div v - if = "score >= 90">A</div><div v - else - if = "score >= 80">B</div><div v - else - if = "score >= 70">C</div><div v - else>D</div>`，假设在Vue实例中有`data: {score: 85}`
v - show	根据条件展示某元素，区别在于切换的是display属性的值	`<div v - show = "isVisible">This div will have its display property toggled</div>`，假设在Vue实例中有`data: {isVisible: true}`
v - for	列表渲染，遍历容器的元素或者对象的属性	`<ul><li v - for = "item in items">{ {item}}</li></ul>`，假设在Vue实例中有`data: {items: ['Apple', 'Banana', 'Cherry']}`

1. v-bind和v-model

我们首先来学习v-bind指令和v-model指令。

v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发
生变化时，标签的属性值会随之发生变化。
接下来我们通过代码来演示。

<div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" >
        </div>
        </body>
        <script>
        //定义Vue对象
        new Vue({
        el: "#app", //vue接管区域
        data:{
        url: "https://www.baidu.com"
        }
        })
        </script>

在上述的代码中，我们需要给<a>标签的href属性赋值，并且值应该来自于vue对象的数据模型中
的url变量。v-bind指令是可以省略的，但是:不能省略。

注意：html属性前面有:表示采用的vue的属性绑定！
v-model：在表单元素上创建双向数据绑定。什么是双向？
vue对象的data属性中的数据变化，视图展示会一起变化
视图数据发生变化，vue对象的data属性中的数据也会随着变化。
data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有
表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码

        <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url">
        </div>
        </body>
        <script>
        //定义Vue对象
        new Vue({
        el: "#app", //vue接管区域
        data:{
        url: "https://www.baidu.com"
        }
        })
        </script>

修改input框中的内容，链接也会跟着改变，见下图：

对比维度	v-bind	v-model
绑定方向	单向绑定，将数据从Vue实例同步到页面	双向绑定，实现数据在Vue实例和页面之间的双向同步
使用场景	用于将数据绑定到HTML属性、CSS样式、Class类名等	主要用于表单元素，实现表单数据的双向绑定
语法	v-bind:属性名="表达式" 或 :属性名="表达式"	v-model="表达式"
数据更新	数据的更新是单向的，从Vue实例到页面	数据的更新是双向的，页面上的修改会同步到Vue实例，Vue实例中的数据变化也会更新到页面
组件使用	可以用于任何组件，用于传递数据和绑定属性	主要用于表单组件，用于实现表单数据的双向绑定

2.v-on

接下来我们学习一下v-on指令。
v-on: 用来给html标签绑定事件的。需要注意的是如下2点：
v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
v-on语法绑定事件时，事件名相比较js中的事件名，没有on

示例代码：

<div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url">
        <input type="button" value="点我一下" v-on:click="handle()">
        <input type="button" value="点我一下" @click="handle()">
        </div>
        </body>
        <script>
        //定义Vue对象
        new Vue({
        el: "#app", //vue接管区域
        data:{
            url: "https://www.baidu.com"
        },
        methods: {
            handle: function(){
                console.log("你点我了一下...");
            }
        }
    });
        



        </script>

3.v-if和v-show

<div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url">
        <input type="button" value="点我一下" v-on:click="handle()">
        <input type="button" value="点我一下" @click="handle()">
        成绩<input type="text" v-model="grade">经判定,为:
        <span v-show="grade < 60">不及格</span>
        <span v-show="grade >= 60 && grade < 80">及格</span>
        <span v-show="grade >= 80">优秀</span>
        </div>
        </body>
        <script>
        //定义Vue对象
        new Vue({
        el: "#app", //vue接管区域
        data:{
            url: "https://www.baidu.com"
            ,grade: 100
        },
        methods: {
            handle: function(){
                console.log("你点我了一下...");
            }
        }
    });
        



        </script>

测试结果

4.v-for

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
{
  
  {变量名}}
</标签>

需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。
有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
{
  
  {索引变量 + 1}} {
  
  {变量名}}
</标签>

        <div v-for="addr in addrs">{
  
  {addr}}</div>
        <hr>
        <div v-for="(addr,index) in addrs">{
  
  {index + 1}} : {
  
  {addr}}</div>

addrs:["北京", "上海", "西安", "成都", "深圳"],