半小时入门Vue.js基础

React.js、Angular.js、Vue.js这三个单页面的框架，也许就Vue最陌生了，所以最近需要学习学习，同时把相应的一些基础总结下来。

Vue的体系中，包括Vue.js、Vue-router、Vue-source、webpack等等一系列知识。

本篇文章的目标：掌握Vue.js的入门基础。

这些所有的demo的github地址：git地址

demo1、Vue的hello world。

Vue是一个JavaScript框架，使用这个框架，需要引入Vue.js。
在本篇文章中，所有的Vue.js都使用官方的cdn托管。

<script src="https://cdn.jsdelivr.net/npm/vue">

一个Vue项目，本质是一个单页面应用，所以需要一个单页面的入口

<div id='app'></div>

然后，有了这个入口，就可以新建Vue的实例了。

new Vue({
     el:'#app',//申明了vue的入口
     data:{
         message:'hello world!'
     }
});

其中el是必须的，表示Vue的入口，data表示声明式渲染的数据。可在dom中展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello world!'
        }
    });
</script>
</body>
</html>

demo2、v-bind绑定dom元素的属性

v-bind:属性=’绑定数据’，这样的格式是动态绑定dom属性的语法。

其中，v-bind是Vue的一个指令。和angular中的指令差不多。（指令在Vue中具有一些特殊的功能）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app" v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'页面加载于 ' + new Date().toLocaleString()
        }
    });
</script>
</body>
</html>

demo3、v-if完成的条件渲染

一个单页面应用，条件渲染是必不可少的一部分。

下面的示例，通过message的值不同，展示不同的界面输出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <p v-if="message">message为true</p>
    <p v-if="!message">message为false</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:true
        }
    });
</script>
</body>
</html>

demo4、v-for完成的列表渲染

单页面应用的另一项重要任务就是渲染数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in message">姓名：{{item.name}},年龄：{{item.age}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[{name:'张三',age:23},{name:'李四',age:24},{name:'王五',age:25}]
        }
    });
</script>
</body>
</html>

demo5、用户输入的双向绑定（v-model）

什么是双向绑定？

就是用户输入什么，我就能得到什么，同时我得到的值直接可以反映到dom界面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <input v-model="message" type="text"/>
    <p>用户输入的值：{{message}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello'
        }
    });
</script>
</body>
</html>

demo6、Vue的事件v-on。

事件是网页和用户交互的核心，Vue使用v-on这个指令来达到交互的目的。

基本语法是：v-on:事件类型=”事件名称”；

其中，事件定义在methods属性中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <button v-on:click="clickEvent">点击我</button>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello'
        },
        methods:{
            clickEvent: function () {
                alert('触发了事件');
            }
        }
    });
</script>
</body>
</html>

demo7、Vue的组件

如果说前面的东西都是小儿科，那么组件的简单使用，是有必要描述一下的。

最简单的组件示例

使用Vue.component(name,obj)来定义一个组件，它一般有两个参数，第一个参数是个字符串，代表组件名称；第二个参数是个对象，代表组件配置。

组件的第二个参数中，template代表要渲染到界面的东西是什么！

组件在使用的时候，把它当做div一样的方式使用就行了。在页面中类似这样的语法：

<组件名></组件名>

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <ol>
        <!--使用组件-->
        <todo-item></todo-item>
    </ol>

</div>
<script>
    //定义一个最简单的组件
    Vue.component('todo-item',{
        template:'<li>这是一个组件</li>'
    });
    new Vue({
        el:'#app'
    });
</script>
</body>
</html>

组件可以接受属性

组件在它的第二个参数对象的属性中，添加一个props就能够接受父组件传递的属性。这个props是一个数组，里面的每一项是父元素的props名字。

组件的定义：

组件的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <ol>
        <!--使用组件-->
        <todo-item
                v-for="item in todoList"
                v-bind:todo="item"
        ></todo-item>
    </ol>

</div>
<script>
    //定义一个最简单的组件
    Vue.component('todo-item',{
        props:['todo'],
        template:'<li>name:{{todo.name}},age:{{todo.age}}</li>'
    });
    new Vue({
        el:'#app',
        data:{
            todoList:[{name:'张三',age:23},{name:'李四',age:24},{name:'王五',age:25}]
        }
    });
</script>
</body>
</html>

假想的组件使用模板

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

demo8、Vue动画

在这里，使用一个最简单的方式，描述Vue的动画。

关于动画的详细描述在这里，进入/离开以及列表过度

1、transition组件是用于动画的一种方式，它有个name属性。

2、使用不同的class用来描述不同时期的动画展现。: 进入状态

v-enter：开始（进入状态）
v-enter-active：过程（进入状态）
v-enter-to：结束（进入状态）; 离开状态
v-leave：开始（离开状态）
v-leave-active：过程（离开状态）
v-leave-to：结束（离开状态）

其中，上面的V代表transiton组件的name属性。

3、完整的示例demo如下：

//这是一个通过v-if展示信息的动画示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
            opacity: 0
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">

    <button v-on:click="clickEvent">切换</button>

    <transition name="fade">
        <p v-if="isShow">
            {{message}}
        </p>
    </transition>

</div>
<script>
    new Vue({
        el:'#app',
        data:{
            isShow: true,
            message:'hello world!'
        },
        methods:{
            clickEvent: function () {
                this.isShow = !this.isShow
            }
        }
    });
</script>
</body>
</html>

半小时入门Vue.js基础

demo1、Vue的hello world。

demo2、v-bind绑定dom元素的属性

demo3、v-if完成的条件渲染

demo4、v-for完成的列表渲染

demo5、用户输入的双向绑定（v-model）

demo6、Vue的事件v-on。

demo7、Vue的组件

最简单的组件示例

组件可以接受属性

假想的组件使用模板

demo8、Vue动画

es6 promise 的具體用法

es6 promise 的具體用法 ES6 Promise用法小結

Web服務器站點設置和IIS安裝設置圖解

通過 Nginx 代理轉發配置實現跨域（API 代理轉發）

Vue初體驗（九）計算屬性

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結