Vue.js 基础学习（一）原创

LUOLEI 2020.07.06 01:29:44 阅读数：874

一、Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js官网： https://cn.vuejs.org/

Vue github https://github.com/vuejs/vue

二、Vue.js 目的：

解决数据绑定的问题
vue框架产生的主要目的是为了开发大型单页面应用，
它还支持组件化，也就是可以将页面封装成若干个组件，这样使页面复用性达到最高（支持组件化）。

三、Vue.js 特性：

MVVM模式：（数据变量（model）发生改变视图（view）也改变，视图（view）改变，数据变量（model）也发生改变）

用MVVM模式的好处：
低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。
独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
可测试性。可以针对ViewModel来对界面(View)进行测试

四、开始创建Vue 应用

1、开始创建第一个 Vue 应用

声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，也就是对数据进行绑定。

复制收展HTML<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title v-bind:title="message">vue-demo</title>
<!-- vue.js CDN --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>
<body>

<div id="app">
{{message}}
</div>

<script type="text/javascript">
var app = new Vue({ //创建Vue对象
el: '#app', //节点元素id
data: { //数据
message: 'hello Vue!'
}
});
</script>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2、Vue.js指令

（1）v-model

作用：实现表单输入和应用状态之间的双向绑定。接收用户输入的一些数据，直接就可以将这些数据挂载到data属性里面

复制收展HTML<div id="app-2">
    <p>{{ message }}</p>
    <input v-model="message">
</div>1
2
3
4

复制收展JavaScriptvar app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'Hello Vue!'
    }
});1
2
3
4
5
6

（2）v-if

作用：通过判断加载内容，若为真加载，为假时删除元素。

复制收展HTML<div id="app-3">
   <p v-if="seen">显示内容</p>
</div>1
2
3

复制收展JavaScriptvar app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
});1
2
3
4
5
6

（3）v-show

作用：v-show 用法和v-if相同，安全性没有v-if高，只是v-show将元素display设置成none，并不是将元素直接移除。

（4）v-else

必须紧跟在v-if或v-show元素的后面，否则它不能被识别。

（5）v-for

作用：循环遍历元素

复制收展HTML<div id="app-4">
    <p> {{ title }}</p>
    <p v-for="todo in todos">
        {{ todo.id +'. '+ todo.name}}
    </p>      
</div>1
2
3
4
5
6

复制收展JavaScriptvar app4 = new Vue({
el: '#app-4',
data: {
title: '前端',
todos: [
{ id: 1, name: 'JavaScript' },
{ id: 2, name: 'jquery' },
{ id: 3, name: 'Vue.js' }
]
}
});1
2
3
4
5
6
7
8
9
10
11

（6）v-bind

作用：v-bind 对页面中html属性进行绑定

复制收展HTML<div id="app-5">
    <img v-bind:src="src" v-bind:style="style"/>
</div>1
2
3

复制收展JavaScriptvar app5 = new Vue({
    el: '#app-5',
    data: {
        src: 'img/1.png',
        style: 'width:100%;height:100%;'
    }
});1
2
3
4
5
6
7

（7）v-on

复制收展HTML<div id="app-6">
    <p>{{message}}</p>
    <input v-on:blur="blur()" id="name"></input>
    <button v-on:click='save(6)'>保存</button>
</div>1
2
3
4
5

复制收展JavaScriptvar app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue.js!'
    },
    methods:{
        save: function(id){
            var name = document.getElementById('name');	
            alert('保存 id=' + id + ' ; name=' + name.value);
        },
        blur: function(){
            alert('blur');
        }
    }
});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

（8）v-bind 和 v-on 缩写

v-bind 和 v-on 缩写很常用所以Vue.js 提供缩写

v-bind 缩写为冒号（：）
v-on 缩写为艾特（@）

用法：对比上面的

复制收展HTML<div id="app-5">
    <img :src="src" :style="style"/>
</div>1
2
3

复制收展HTML<div id="app-6">
    <p>{{message}}</p>
    <input @blur="blur()" id="name"></input>
    <button @click='save(6)'>保存</button>
</div>1
2
3
4
5

阅读全文

前端开发 Vue vue

判断数据库中是否有某张表（MySQL/Oracle）

HTTP超文本传输协议(HyperText Transfer Protocol)