-
文档来源为
:
从网络收集整理
< br>.word
版本可编辑
.
欢迎下
载支持
.
学习
在学习
vue
之前,需先学习
与
webpack
1.
关于
用于构建交互式的
web
界面的库。他提供了
MVVM
数据绑定和一个可组合
的组件系统,
具有简单、灵活的
API
,
集成在
MVVM
模式上的试图模型层,并通过双向绑定连接视图和模
型。实际的
DOM
操作和输出格式被抽象出来成指令和过滤器。相比其他的
MVVM
框架,
更
容易上手。
是一个用于创建
W
eb
交互界面的库。它让你通过简单而灵活的
API
创建由数据驱
动的
UI
组
件。
npm
(
node package
manager
)
:作为
node
p>
的包管理工具,极大地便利了我们的开发工作。
包括:安装、卸载、更新、查看、搜索、发布等。
你的团队无需去亲自开发一些特定功能的模块,而是直接引用
各个领域专家写好的代码。即使
你的团队不需要引用外部代码,这种基于模块的开发方式
也能很好的推动团队开发。
:
就是运行在服务端的
JavaScript
。<
/p>
是一个基于
Chrome
JavaScript
运行时建立的一个平台。
是一个事件驱动
I/O
服务
端
JavaScript
环境,基于
G
oogle
的
v8
引擎,
v8
引擎执行
JavaScript
的速度非常快,性能非常好。
webstrom
:
为
JS<
/p>
开发做了很多优化,
MVVM(Model-View-ViewModel)
:<
/p>
MVVM
框架的由来白女士
MVP
(
Model-View-Presenter
)模式
与
WPF
结合的应用方式时发
展演变过来的一种新型架构框架。
2.
安装
1
、
独立版本
直接下载
< br>
标签引入,
Vue
会被注册为一个全局变量。
2
、
CDN
可以从
jsdelivr
或
cdnjs
获取
3
、
CSP
兼容
有些环境,
如
Goole
Chrome Apps
,
强制应用内容安全策略
(
CSP
)
,
不能使用
new
Function()
对表达式求值。
4
、
NPM
使用
Vue
构建大型应用时使用
NPM
安装,
NPM
能很好地和诸如
Webpack
或
Browserify
的
Common
JS
模块打包器配合使用。
也提供配套
工具来开发文件组件
$$
npm install vue
$$
npm install vue@csp
5
、
命令行工具
1
文档来源为
:
从网络收集整理
.w
ord
版本可编辑
.
欢迎下载支持
p>
.
提供一个官方命令行功能工具,可用于
快速搭建大型单页应用。该工具提供开箱即
用的构建工具配置,带来现代化的前端开发流
程。只需一分钟即可启动带热加载、保护时
静态检查以及可用于生产的构建配置的
全局安装
vue-cli
$$ npm install
–
g vue-cli
创建一个基于
”
webpack
”
< br>项目的新模板
Vue init webpack
my-project
安装依赖
cd my-project
npm intstall
npm rul build
6
、
Bower
3.
起步
起步
我们以
Vue
数据绑定的快速导览开始。
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
>
< br>
<
script
type
=
src
=
><
/
script
>
< br><
title
>
title
>
he
ad
>
<
body
>
<
div
id
=
>
p>
<
p
>
{{message}}
< br>
p
>
<
input
v-model
=
>
<
ul
>
<
li
v-
for
=
>
{{ }}
li
>
ul
>
<
button
v-on:click
=
>
Reverse Message
but
ton
>
div
>
body
>
<
script
>
new
Vue({
el:
'#app'
,
data:{
message:
'Hello
!'
,
todos:[
2
文档来源为
p>
:
从网络收集整理
.word
版本可编辑
.
欢迎下载支持
.
{text:
'Learn
JavaScript'
},
{text:
'Learn '
},
{text:
'Build Something
AweSome'
}
]
},
methods:{
reverseMessage:
f
unction
(){
this
.message =
}
}
})
script
>
< br>
html
>
4.
概述
概述
是一个
构建数据驱动的
web
界面的库。
p>
的目标是通过尽可能简单的
API
实现
p>
响应的数据绑定
和
组
合的视图组件
自身不是一个全能框
架
—
它值聚焦于视图层。
因此它非常容
易学习,
非常容易与其他库或已有项目整合。
另一方面,在与相
关工具和支持库一起使用时,
也能完美地驱动复杂的单页应用。
响应的数据绑定
< br>
的核心是一个响应的数据绑定系统,它让数据与
DOM<
/p>
保持同步非常简单。在使用
Jquery
手
工操作
DOM
时,我们的代码常常是
命令式的、重复的与易错的。
拥有
数据
驱动的试图概念。
通俗地讲,它意味着我们在普通
HTML
p>
模板中使用特殊的语法将
DOM
“绑定”到
底层数据。一旦创
建了绑定,
DOM
将
与数据保持同步。每当修改了数据,
DOM
便相应地更新。这样
我们应用中的逻
辑就几乎都是直接修改数据了,不必与
DOM<
/p>
更新搅在一起。这让我们的代码更容易撰写、理解与
维护。
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
>
< br>
<
title
>
Insert title here
titl
e
>
<
script
type
=
src
=
><
/
script
>
< br>
head
>
<
body
>
<
div
i
d
=
>
<
p
p>
v-if
=
>
p>
Hello
p
>
div
>
body
>
<
script
>
new
Vue({
el:
,
3
文档来源为
:
从网络收集整理
.word
版本可编辑
.
欢迎下载支持
.
data:{
greeting:
false
}
})
script
>
html
>
这里我们遇到新东西。
你看到的
v-if
特性被称为
指令
。
指令带有前缀
v-
,
以指示它们是
提
供的特殊特性。并且如你所想象的
,它们会对绑定的目标元素添加响应式的特殊行为。继续在控制
台设置
< br>
ng
为
false
,你会发现
消失了。
这个例子演示了我们不仅可以绑定
DOM
文本到数据,也可以绑定
DOM
结构
到数据。而且,
也提供一个强大的过渡效果系统,可以在
Vue
插入
/
删除元素时自动应用过渡效果。
也有一些其它指令,每个都有特殊的功能。例如
v-for
指令用于显示数组元素,
v-bind
指令
用于绑定
HTML
特性。我们将在后面详细讨论全部的数据绑定语法。
组件系统
组件系统是
另一个重要概念,
因为它提供了一种抽象,
让我们可以用独立可复用的小组
间来构建大型应用。
<
div
id
=
>
<
app-
nav
>
app-
nav
>
<
app-
view
>
<
app-
sidebar
>
app-
sidebar
>
<
app-
content
>
app-
content
>
app-
view
>
div
>
5.
实例
构造器
每个
应用的起步都是通过构造函数
Vue
创
建一个
Vue
的根实例:
Var vm = new Vue({
})
一个
Vue
实例其实正是一个
MVVM
模式中所描述的
ViewModel-
因此在文档中经常会使用
vm
这个
变量名。
在实例化
Vue
时,需要传入一个
选
项对象
,它可以包含
数据、模板、挂载元素、方法、生命周期钩
子
等选项
可
以扩展
Vue
构造器,从而用预定义选项创建可复用的
组件构造器
var
MyComponent = ({
//
扩展选项
4
文档来源为
:
从网络收集整理
.wo
rd
版本可编辑
.
欢迎下载支持
.
})
//
所有的
`MyComponent`
实例都将以预定义的扩展选项被创建
var
myComponentInstance =
new
MyComponent()
尽管可以命令式地创建扩展实例,不过在多数情况下将组件构造器注册为一个自定义元素,然后声
明式地用在模板中。
我们将在后面详细说明组件系统。
现在你只需知道所有的
组件其实都是
被扩展的
Vue
实例。
属性和方法
每个
Vue
实例都会代理其
data
对
象里所有的属性
var data = {a:1};
var vm = new Vue({
data:data
})
vm.a
= data.a; //true
//
设置属性也会影响到原始值
vm.a = 2;
data.a//
2
注意只有这些代
理的属性是响应的。如果再实例创建之后添加新的属性到实例上,它不会触发视图
更新。
我们将在后面详细讨论响应系统。
除了这些数据属性,
Vue
实例暴露
了一些有用的实例属性与方法。这些属性与方法都有前缀
$$<
/p>
,以
便与代理的数据属性区分。例如:
var
data = { a: 1 }
var
vm =
new
Vue({
el:
'#example'
,
data: data
})
vm.$$data ===
data
// -> true
vm.$$el ===
mentById(
'example'
)
// -> true
//
$$watch
是一个实例方法
vm.$$watch(
'a'
,
function
(newVal, oldVal) {
//
这个回调将在
`vm.a`
改变后调用
})
实例生命周期
Vue
实例在创建时有一系列初始化步骤
----
例如,它需
要建立数据观察,编译模板,创建必要的数据
绑定。在此过程中,它也将调用一些
生命周期钩子
,给自定义逻辑提供运行机会。例如
created
钩
子在实例创建之后调用:
var
vm =
new
Vue({
data : {
a : 1
},
created :
function
() {
// `this`
指向
vm
实例
(
'a is: '
+
this
.a)
}
})
5
-
-
-
-
-
-
-
-
-
上一篇:2020雅思口语范文
下一篇:安全事故调查规程试题