Vue基本知识

Vue

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

Vue基础

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

Vue1 淘汰。

Vue2 过渡期，逐步转向Vue3。

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

vue2的官方文档：Vue.js

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

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

欢迎：亮亮
$('#user').text('欢迎：小新')
$('#name').text('张三')

vue操作Dom的方式，如下：

欢迎：{{name}}
欢迎：{{name}}
欢迎：{{name}}
欢迎：{{name}}
欢迎：{{name}}
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中为元素绑定事件的方式

    
    按钮  
    
    sum
    sum()
    sum(5, 8)
    换一部电影(Vue)    

new Vue({
    data: {},
    methods: {
        doClick(){
            console.log('click...')         
        }
    }
})

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

Vue中元素属性的动态绑定

链接

在平时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类名

文本
介绍
​

介绍
data: {
    i: 0,
    className: 'c1'
}

动态修改标签的style

文本
文本
data: {
    c: 'red'
}

Vue中的常用指令

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

1. v-on 用于绑定事件

2. v-bind 用于动态绑定属性

3. v-show 用于动态显示或隐藏当前元素