渐进式框架 Vue.js 基础入门及简单编程演示
渐进式框架 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.
Vue（发音为/vjuː/，与view一样）是构建用户界面的渐进式框架。
与其他单一框架不同的是，Vue从头开始被设计为可以逐步采用。
核心库只专注于视图层，并且很容易与其他库或现有项目集成。
另一方面，与现代工具和支持库结合使用时，Vue也能够完美地支持复杂的单页应用程序。
如果有 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 模式的特点。
易用： 有 HTML,CSS,JavaScript 快速入门；
灵活： 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用；
高效： 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化；
简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例；
快速： 精确有效的异步批量 DOM 更新；
组件化： 用解耦、可复用的组件来构造界面；
数据驱动： 自动追踪依赖的模板表达式和计算属性；
轻量无依赖。
---------------------- HelloWorld ----------------------
此处暂时使用在线的 js 文件，通过引入下面这行代码使用 js 文件，当然也可以将vue.js文件download下来。
[html]view plaincopy
新建hello.html，在index.html 添加超链接跳转到hello.html，做一个helloworld
(1) index.html代码如下
[html]view plaincopy
Hello Vue.js
(2) hello.html代码如下
[html]view plaincopy
{{message}}
varapp=newVue({
el:'#app',
data:{
message:'Hello Vue!'
}
});
图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)另外，为了练习基本的逻辑处理，此处加上了下面的逻辑控制。
[html]view plaincopy
男
女
(3)通过{{}}双花括号取值的练习及对年龄大于30的做一个文本色为红色的处理
[html]view plaincopy
30 ? 'color: red' : ' ' ">{{ person.age }}
(4)此处通过@Click 绑定函数，触发相应的逻辑处理。
[java]view plaincopy
注 册
Delete
(5)Vue实例中关于函数的定义及初始化
[html]view plaincopy
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
[html]view plaincopy
#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
[html]view plaincopy
Create New Account
账户:
年龄:
性别:
Male
Female
注 册
Find Account By Name
Name
Age
Gender
Delete
=0||person.sex.indexOf(search.key)>=0||person.age==search.key">
{{ person.name }}
30 ? 'color: red' : ' ' ">{{ person.age }}
男
女
Delete
// 初始化Vue
//el获取绑定的标签，#app获取id为app的dom，.app的话则获取class为app的dom
//data中为模型
//methods为方法
varvm=newVue({
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);
}
}
})
---------------------- The End ----------------------
