渐进式框架 vue.js 基础入门及简单编程演示
---------------------- 概念基础 ----------------------
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
如果有 html,CSS 和 JavaScript 相关的基础,会更加容易理解学习。
Vue.js 是一种基于 MVVM 模式的框架。了解 MVC 的接受起来更快一些。
(1) MVC 是 web 开发中常用的一种模式,将开发大致分为三层实体模型层,前端视图层,逻辑控制层。
---------------------- HelloWorld ----------------------
此处暂时使用在线的 js 文件,通过引入下面这行代码使用 js 文件,当然也可以将 vue.js 文件 download 下来。
新建 hello.html,在 index.html 添加超链接跳转到 hello.html,做一个 helloworld
- <script src="https://unpkg.com/vue"></script>
(1) index.html 代码如下
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <body>
- <a href="HelloVue/hello.html">Hello Vue.js</a>
- </body>
- </html>
(2) hello.html 代码如下
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script src="https://unpkg.com/vue">
- </script>
- </head>
- <body>
- <div id="app">
- {{message}}
- </div>
- <script type="text/javascript">
- var app = new Vue({
- el: '#app',
- data: {
- message: 'Hello Vue!'
- }
- });
- </script>
- </body>
- </html>
图 2-5-1.index.html 视图
图 2-5-2.hello.html 效果视图
首先我们新建一个 Vue 实例,初始化 el 属性及 data 等数据。
通过 el 属性指定 Vue 程序的接管范围 通过 data 向 Vue 实例的应用程序中初始化了一个 message 成员;
这里 Vue 程序通过 el 属性指定 id 为 #app 的 div 开始解析执行 Vue 能识别的语法 {{message}} ;
在 Vue 中被称为双花括号插值表达式 在双括号插值表达式中可以使用当前元素所属 Vue 程序接管范围的 data 中的数据
---------------------- 简单编程案例 ----------------------
(1) 运行项目通过超链接进入 hello.html
图 3-1-1.hello.html 视图
(2) 静态注册一条记录,同步更新数据显示
图 3-1-2. 数据注册效果图
(3) 删除一组数据,数据显示同步更新
图 3-1-3. 记录删除效果图
(4) 匹配查询相关记录
图 3-1-4. 记录匹配效果图
(1) 需求基本在效果演示体现出来了。直白点就是记录的增删改查。
(2) 另外,为了练习基本的逻辑处理,此处加上了下面的逻辑控制。
(3)通过 {{}} 双花括号取值的练习及对年龄大于 30 的做一个文本色为红色的处理
- <td v-if="person.sex =='Male'"> 男</td>
- <td v-else> 女</td>
(4) 此处通过 @Click 绑定函数,触发相应的逻辑处理。
- <td :style="person.age>30 ? 'color: red' : ' ' "> {{ person.age }}</td>
(5)Vue 实例中关于函数的定义及初始化
- <button @click="createPerson">注 册</button>
- <td class="text-center"><button @click="deletePerson($index)">Delete</button></td>
- methods: {
- createPerson: function() {
- this.people.push(this.newPerson);
- // 添加完newPerson对象后,重置newPerson对象
- this.newPerson = {
- name: '',
- age: 0,
- sex: 'Male'
- }
- },
- deletePerson: function(index) {
- // 删一个数组元素
- this.people.splice(index, 1);
- }
- }
图 3-3-1. 项目结构图
此处依然使用的是在线 js ,引入 https://unpkg.com/vue 即可。
(1) style/demo.css
- #app {
- margin: 50px auto;
- width: 810px;
- }
- table {
- border: 2px solid#D73636;
- margin - top: 5px;
- }
- th {
- width: 200px;
- height: 50px;
- color: white;
- background - color: #E43636;
- }
- td {
- width: 25 % ;
- height: 40px;
- border: thin;
- color: black;
- background - color: gainsboro;
- }
- label {
- margin - left: 5 % ;
- }
- button {
- border: lightblue;
- border - radius: 5px;
- margin - top: 5px;
- margin - bottom: 5px;
- margin - left: 10px;
- width: 70px;
- height: 30px;
- color: white;
- background - color: #D73636;
- }
(2) hello.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link rel="stylesheet" href="styles/demo.css" />
- <script src="https://unpkg.com/vue"></script>
- </head>
- <body>
- <div id="app">
- <hr size="3" color="#D73636" />
- <legend>
- Create New Account
- </legend>
- <div class="form-group">
- <label>账户:</label>
- <!-- 绑定model中newPerson.name -->
- <input type="text" v-model="newPerson.name" />
- </div>
- <div class="form-group">
- <label>年龄:</label>
- <!-- 绑定model中newPerson.age -->
- <input type="text" v-model="newPerson.age" />
- </div>
- <div class="form-group">
- <label>性别:</label>
- <!-- 绑定model中newPerson.sex -->
- <select v-model="newPerson.sex">
- <option value="Male">Male</option>
- <option value="Female">Female</option>
- </select>
- </div>
- <div class="form-group">
- <label></label>
- <!-- @click是v-on:click的缩写 -->
- <button @click="createPerson">注 册</button>
- </div>
- </fieldset>
- <hr size="3" color="#D73636" />
- <span>Find Account By Name</span>
- <!-- 绑定model中search.key -->
- <!-- 内容和下面每一列的数据进行比较 -->
- <!-- 内容改变,下面的每一列都马上会进行比较 -->
- <input type="text" v-model="search.key">
- <table>
- <thead>
- <tr>
- <th>Name</th>
- <th>Age</th>
- <th>Gender</th>
- <th>Delete</th>
- </tr>
- </thead>
- <tbody>
- <!-- 用v-for迭代,$index为每一个item的索引 -->
- <!-- v-if判断为true则显示,否则则移除,这里更适合用v-show,v-show并不会移除dom只会将display属性改为none -->
- <!-- 和搜索框内容进行比较 -->
- <tr v-for="person in people" v-if="person.name.indexOf(search.key)>=0||person.sex.indexOf(search.key)>=0||person.age==search.key">
- <td> {{ person.name }}</td>
- <!-- :style是v-bind:style的缩写,满足条件则值为前面的,否则为后面的,固定的字符串要用' ',变量不需要用'' -->
- <!-- v-bind后面还可以接其他的属性例如class,id -->
- <td :style="person.age>30 ? 'color: red' : ' ' "> {{ person.age }}</td>
- <!-- v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别 -->
- <td v-if="person.sex =='Male'"> 男</td>
- <td v-else> 女</td>
- <td class="text-center"><button @click="deletePerson($index)">Delete</button></td>
- </tr>
- </tbody>
- </table>
- </div>
- </body>
- <script>
- // 初始化Vue
- //el获取绑定的标签,#app获取id为app的dom,.app的话则获取class为app的dom
- //data中为模型
- //methods为方法
- var vm = new Vue({
- el: '#app',
- data: {
- search: {
- key: ""
- },
- newPerson: {
- name: '',
- age: 0,
- sex: 'Male'
- },
- people: [{
- name: 'Jack',
- age: 30,
- sex: 'Male'
- }, {
- name: 'Bill',
- age: 26,
- sex: 'Male'
- }, {
- name: 'Tracy',
- age: 22,
- sex: 'Female'
- }, {
- name: 'Chris',
- age: 36,
- sex: 'Male'
- }]
- },
- methods: {
- createPerson: function() {
- this.people.push(this.newPerson);
- // 添加完newPerson对象后,重置newPerson对象
- this.newPerson = {
- name: '',
- age: 0,
- sex: 'Male'
- }
- },
- deletePerson: function(index) {
- // 删一个数组元素
- this.people.splice(index, 1);
- }
- }
- })
- </script>
- </html>
来源: http://blog.csdn.net/niaonao/article/details/78832612