第1章 Vue简介

来源：互联网发布：外卖小票打印软件编辑：程序博客网时间：2024/05/29 21:32

Google的AngularJS
Facebook的ReactJS

1.1 Vue.js是什么
开发Web界面的前端库。具有响应式编程和组件化的特点。
响应式编程：即为保持状态和视图的同步
一切都是组件：可以将任意封装好的代码注册成标签

1.2 为什么要用Vue.js
轻量级、易上手。

1.3 Hello World

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div id="example">        {{ message }}    </div><script src="https://unpkg.com/vue"></script><script>    new Vue({        el : '#example',        data :{            message : 'Hello World ! I am Vue.js!'        }    })</script></body></html>

1）数据绑定

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div id="example">        you input is {{ message }} !<br/>        <input type="text" v-model="message">    </div><script src="https://unpkg.com/vue"></script><script>    new Vue({        el : '#example',        data :{            message : 'Hello World ! I am Vue.js!'        }    })</script></body></html>

这里写图片描述

2) 组件化

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div id="example">        <component message="Hello World!"></component>    </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script>    var component = Vue.extend({        props : ['message'],        template : '<h1> {{ message}}</h1>'    })    Vue.component('component',component)    new Vue({        el : '#example'    })</script></body></html>

阅读全文

0 0