Vue基本知识

Vue基本知识
Vue

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

Vue基础

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

Vue1 淘汰。

Vue2 过渡期，逐步转向Vue3。

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

vue2的官方文档：Vue.js

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

传统的DOM操作或jquery的开发方式，如果需要操作dom，例如：
```
"user">欢迎："name">亮亮</span>div>
$('#user').text('欢迎：小新')
$('#name').text('张三')
```
vue操作Dom的方式，如下：
```
"#app">欢迎：{{name}}
<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案例，写一个电影详情页。

准备好一个电影详情信息，在页面中展示出来。
1. 准备一个html页面，01_movie.html。下载并引入vue.js。
2. 编写代码，基于vue声明式渲染语法，完成详情信息的展示。
Vue中的插值语法 {{}}
```
{{js表达式}}
```
在js表达式中可以直接访问vue的data中声明的变量，也可以进行数据的运算、方法的调用。

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

Object.defineProperties。

Vue的事件处理

Vue中为元素绑定事件的方式
```
"app">
    
    <button v-on:click="doClick()">按钮button>  
    
    <button @click="sum">sumbutton>
    <button @click="sum()">sum()button>
    <button @click="sum(5, 8)">sum(5, 8)button>
    <button @click="doClick">换一部电影(Vue)button>    
```
new Vue({
data: {},
methods: {
doClick(){
console.log('click...')
}
}
})

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

Vue中元素属性的动态绑定


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

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


 
data: {
    url: 'http://www.xxx.com/1.jpg',
    name: '1.jpg',
    n: 1
}

Vue中元素样式的动态绑定

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


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

动态修改class类名


class="className">文本
<div :class="`tab ${i==0?'active':''}`">介绍div>
<div :class="{tab:true, active:i==0}">介绍div>
data: {
    i: 0,
    className: 'c1'
}

动态修改标签的style


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

Vue中的常用指令

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

v-on 用于绑定事件
v-bind 用于动态绑定属性
```
bind:src="url">
```
v-show 用于动态显示或隐藏当前元素
```
"show">
```

Vue

Vue基础

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

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

Vue中的插值语法 {{}}

Vue的事件处理

Vue中元素属性的动态绑定

Vue中元素样式的动态绑定

动态修改class类名

动态修改标签的style

Vue中的常用指令