您的位置：首页 > 产品设计 > UI/UE

[置顶] 渐进式框架 Vue.js 基础入门及简单编程演示

2017-12-18 18:35 741 查看

渐进式框架 Vue.js 基础入门及简单编程演示
---------------------- 概念基础 ----------------------

一、Vue.js

1-1.基本概念

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.

Vue（发音为/vjuː/，与view一样）是构建用户界面的渐进式框架。
与其他单一框架不同的是，Vue从头开始被设计为可以逐步采用。
核心库只专注于视图层，并且很容易与其他库或现有项目集成。
另一方面，与现代工具和支持库结合使用时，Vue也能够完美地支持复杂的单页应用程序。

1-2.入门

如果有 HTML，CSS和JavaScript 相关的基础，会更加容易理解学习。

Vue.js是一种基于MVVM模式的框架。了解 MVC 的接受起来更快一些。

(1)
MVC是Web 开发中常用的一种模式，将开发大致分为三层实体模型层，前端视图层，逻辑控制层。

Model : 业务逻辑和实体模型(biz/bean)
View : 布局文件(XML)
Controller : 控制器(Activity)
(2) MVVM模式

Model : 实体模型(biz/bean)
View : 布局文件(XML)
ViewModel : DataBinding所在之处，对外暴露出公共属性，View和Model的绑定器。数据的绑定是 MVVM 模式的特点。

1-3.特点

易用：有 HTML,CSS,JavaScript 快速入门；
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用；
高效： 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化；
简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例；
快速：精确有效的异步批量 DOM 更新；
组件化：用解耦、可复用的组件来构造界面；
数据驱动：自动追踪依赖的模板表达式和计算属性；
轻量无依赖。
---------------------- HelloWorld ----------------------

二、Hello Vue.js

2-1.开发工具 : HBuilder

2-2.Create New Web Project

此处暂时使用在线的 js 文件，通过引入下面这行代码使用 js 文件，当然也可以将vue.js文件download下来。

<script src="https://unpkg.com/vue"></script>

新建hello.html，在index.html 添加超链接跳转到hello.html，做一个helloworld

2-3.代码演示

(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-4.运行项目

2-5.效果演示

图2-5-1.index.html 视图

图2-5-2.hello.html 效果视图

2-6.补充说明

首先我们新建一个Vue 实例，初始化el 属性及data 等数据。

通过 el 属性指定 Vue程序的接管范围通过 data 向Vue 实例的应用程序中初始化了一个 message 成员；

这里Vue 程序通过 el 属性指定id为 #app 的div 开始解析执行 Vue 能识别的语法 {{message}} ；

在Vue 中被称为双花括号插值表达式在双括号插值表达式中可以使用当前元素所属Vue程序接管范围的data中的数据

----------------------简单编程案例 ----------------------

三、简单的编程案例

3-1.案例效果如下

(1)运行项目通过超链接进入hello.html

图3-1-1.hello.html 视图
(2)静态注册一条记录，同步更新数据显示

图3-1-2.数据注册效果图
(3)删除一组数据，数据显示同步更新

图3-1-3.记录删除效果图
(4)匹配查询相关记录

图3-1-4.记录匹配效果图

3-2需求说明

(1)需求基本在效果演示体现出来了。直白点就是记录的增删改查。

(2)另外，为了练习基本的逻辑处理，此处加上了下面的逻辑控制。

<td v-if="person.sex =='Male'">  男</td>
<td v-else>  女</td>

(3)通过{{}}双花括号取值的练习及对年龄大于30的做一个文本色为红色的处理

<td :style="person.age>30 ? 'color: red' : ' ' ">  {{ person.age }}</td>

(4)此处通过@Click 绑定函数，触发相应的逻辑处理。

<button @click="createPerson">注 册</button>
<td class="text-center"><button @click="deletePerson($index)">Delete</button></td>

(5)Vue实例中关于函数的定义及初始化

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项目结构图

图3-3-1.项目结构图

3-4代码演示

此处依然使用的是在线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>

参考文章

vue.js学习（1） vue.js 第一个实例

遇见Vue.js——第一个Vue.js程序

---------------------- The End ----------------------

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航