Vue基本知识

Vue

Web三大框架之一。 Vue、React、Angular

Vue基础

现阶段，Vue已经有3个大版本：

Vue1 淘汰。

Vue2 过渡期，逐步转向Vue3。

Vue3 官方主推版本，以后主流。

vue2的官方文档：Vue.js

使用Vue开发web应用的编程方式

传统的DOM操作或jquery的开发方式，如果需要操作dom，例如：

javascript"><div id="user">欢迎：<span id="name">亮亮</span></div>
$('#user').text('欢迎：小新')
$('#name').text('张三')

vue操作Dom的方式，如下：

javascript"><div id="#app">欢迎：{{name}}</div>
<div id="#app">欢迎：{{name}}</div>
<div id="#app">欢迎：{{name}}</div>
<div id="#app">欢迎：{{name}}</div>
<div id="#app">欢迎：{{name}}</div>
new Vue({
    el: '#app',
    data: {
        name: '亮亮'
    }
})

第一个vue案例，写一个电影详情页。

准备好一个电影详情信息，在页面中展示出来。

准备一个html页面，01_movie.html。下载并引入vue.js>vue.js。
编写代码，基于vue声明式渲染语法，完成详情信息的展示。

Vue中的插值语法 {{}}

<span>{{js表达式}}</span>

在js表达式中可以直接访问vue的data中声明的变量，也可以进行数据的运算、方法的调用。

Vue在背后做了大量的工作，通过声明式的语法在data中声明变量，这些变量将于页面中引用该变量的dom元素建立关联，一旦建立好这个关联关系，data中定义的这些变量将会具备响应式的特点。（一旦data中的变量值有变化，vue将会操作关联的dom元素自动更新；不需要程序员找到某一个DOM元素，然后手动更新）。

Object.defineProperties。

Vue的事件处理

Vue中为元素绑定事件的方式

javascript"><div id="app">
    <!-- vue1的写法 -->
    <button v-on:click="doClick()">按钮</button>  
    <!-- vue2的写法 -->
    <button @click="sum">sum</button>
    <button @click="sum()">sum()</button>
    <button @click="sum(5, 8)">sum(5, 8)</button>
    <button @click="doClick">换一部电影(Vue)</button>    
</div>
new Vue({
    data: {},
    methods: {
        doClick(){
            console.log('click...')         
        }
    }
})

当通过@click="sum"语法绑定事件时，在执行sum方法的同时，vue将会自动的传入一个参数：事件对象。

Vue中元素属性的动态绑定

javascript"><img src="http://xxx.com/1.jpg" title="">
<a href="http://www.baidu.com">链接</a>
<input type="password" readonly  disabled  placeholder="">

在平时vue页面开发中，元素的属性有修改的需求时，就需要实现元素属性的动态绑定。意味着将元素的属性与data中声明的变量建立关联，那么当需要修改属性时，只需要修改data中相应的变量即可。语法如下：

javascript"><!-- vue1的版本 -->
<img v-bind:src="url"> 
<!-- vue2的版本 -->
<img :src="url">
<input type="text" placeholder="输入密码"><button>小眼睛</button>

<!-- 野的写法 -->
<img :src="'http://www.xxx.com/'+name">
<img :src="`http://www.xxx.com/${name}`">
<img :src="`http://www.xxx.com/${n}.jpg`">
data: {
    url: 'http://www.xxx.com/1.jpg',
    name: '1.jpg',
    n: 1
}

Vue中元素样式的动态绑定

在页面中为元素添加css样式的方式，主要有两种：

javascript">.c1 {color:red; }
.c2 {color:blue; }
<div class="c1">文本</div>
<div style="color:red;">文本</div>

动态修改class类名

javascript"><div :class="className">文本</div>
<div :class="`tab ${i==0?'active':''}`">介绍</div>

<!-- Vue提供了一种使用对象来动态修改class的语法 -->
<div :class="{tab:true, active:i==0}">介绍</div>
data: {
    i: 0,
    className: 'c1'
}

动态修改标签的style

javascript"><div :style="`color: ${c};`">文本</div>
<div :style="{ color:c, border:'1px solid black;' }">文本</div>
data: {
    c: 'red'
}

Vue中的常用指令

在vue管理的dom元素中，如果发现dom元素身上有v-开头的属性，将会把这些属性当做是vue指令来处理。指令的属性值会被vue当做是javascript代码段来解释执行。不同的指令有不同的功能：

v-on 用于绑定事件

javascript"><button v-on:click="doClick"></button>

v-bind 用于动态绑定属性
```
javascript"><img v-bind:src="url">
```
v-show 用于动态显示或隐藏当前元素
```
javascript"><div v-show="show"></div>
```