update：Vue的系统指令
This commit is contained in:
qianguyihao
parent
22c8dcd80f
commit
dd8e71564a
@ -29,6 +29,23 @@
|
||||
"workbench.editor.enablePreview": false,
|
||||
```
|
||||
|
||||
### 在本地开启服务器
|
||||
|
||||
```bash
|
||||
# 安装
|
||||
npm install -g live-server
|
||||
|
||||
# 启动
|
||||
live-server
|
||||
```
|
||||
|
||||
|
||||
参考链接：[Visual Studio Code + live-server编辑和浏览HTML网页](http://www.cnblogs.com/1zhk/p/5699379.html)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 常用插件
|
||||
|
||||
@ -165,7 +182,6 @@ Sass 文件格式化。
|
||||
|
||||
|
||||
|
||||
|
||||
### 代码格式化
|
||||
|
||||
|
||||
|
||||
@ -11,6 +11,58 @@
|
||||
|
||||
- View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
|
||||
|
||||
|
||||
## 关于框架
|
||||
|
||||
|
||||
### 为什么要学习流行框架
|
||||
|
||||
**1、企业为了提高开发效率**：在企业中，时间就是效率，效率就是金钱；企业中，使用框架，能够提高开发的效率。
|
||||
|
||||
|
||||
**提高开发效率的发展历程**：
|
||||
|
||||
原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
|
||||
|
||||
|
||||
2、在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑。
|
||||
|
||||
|
||||
|
||||
**3、增强自己就业时候的竞争力**：
|
||||
|
||||
- 人无我有，人有我优。
|
||||
|
||||
- 你平时不忙的时候，都在干嘛？
|
||||
|
||||
|
||||
|
||||
### 框架和库的区别
|
||||
|
||||
|
||||
**框架**：
|
||||
|
||||
框架是一套完整的解决方案。
|
||||
|
||||
对项目的**侵入性**较大，项目如果需要更换框架，则需要重新架构整个项目。但是优点也很明显：功能完善、提供了一整套的解决方案。
|
||||
|
||||
|
||||
|
||||
|
||||
**库（插件）**
|
||||
|
||||
只是提供某一个小功能。
|
||||
|
||||
对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
|
||||
|
||||
举例：
|
||||
|
||||
- 从Jquery 切换到 Zepto
|
||||
|
||||
- 从 EJS 切换到 art-template
|
||||
|
||||
|
||||
|
||||
## 前端的各种框架
|
||||
|
||||
### Vue、React、AngularJS
|
||||
@ -24,6 +76,12 @@ AngularJS 提供更多的是一套解决方案，更像是一个生态。
|
||||
|
||||
|
||||
|
||||
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架。
|
||||
|
||||
Vue.js 是一套构建用户界面的框架，**只关注视图层**。
|
||||
|
||||
|
||||
|
||||
### Vue 和 React 的相同点
|
||||
|
||||
|
||||
@ -77,9 +135,9 @@ Vue框架中，没有控制器。
|
||||
|
||||
- Vue2.x 在线文档：<https://cn.vuejs.org/v2/guide/>
|
||||
|
||||
- Vue1下载地址：http://v1-cn.vuejs.org/js/vue.js
|
||||
- Vue1下载地址：<http://v1-cn.vuejs.org/js/vue.js>
|
||||
|
||||
- Vue2下载地址：https://unpkg.com/vue@2.2.1/dist/vue.js
|
||||
- Vue2下载地址：<https://cdn.jsdelivr.net/npm/vue/>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -13,8 +13,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<!--vue的版本：2.5.15-->
|
||||
<script src="vue.js"></script>
|
||||
<!--1、导入Vue的包-->
|
||||
<script src="vue2.5.15.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--这个div区域就是MVVM中的 View-->
|
||||
@ -24,9 +24,10 @@
|
||||
</body>
|
||||
|
||||
<script>
|
||||
//new出来的对象就是MVVM中的 View Module
|
||||
// 2、创建一个Vue的实例
|
||||
//new出来的对象就是MVVM中的 View Module（调度者）
|
||||
var myVue = new Vue({
|
||||
el: '#div1', //当前vue对象将接管上面的div区域
|
||||
el: '#div1', //当前vue对象将接管上面的div1区域
|
||||
data: {//data就是MVVM中的 module
|
||||
name: 'smyhvae'
|
||||
}
|
||||
@ -45,6 +46,373 @@
|
||||
|
||||
下面来讲一下Vue的各种系统指令。
|
||||
|
||||
|
||||
## 插值表达式 {{}}
|
||||
|
||||
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：
|
||||
|
||||
```html
|
||||
<span>Message: {{ msg }}</span>
|
||||
```
|
||||
|
||||
Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
|
||||
无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会**自动更新**。
|
||||
|
||||
`{{}}`对JavaScript 表达式支持，例如：
|
||||
|
||||
```javascript
|
||||
{{ number + 1 }}
|
||||
|
||||
{{ ok ? 'YES' : 'NO' }}
|
||||
|
||||
{{ name == 'smyhvae' ? 'true' : 'false' }}
|
||||
|
||||
{{ message.split('').reverse().join('') }}
|
||||
```
|
||||
|
||||
|
||||
但是有个限制就是，每个绑定都**只能包含单个表达式**，如下表达式无效：
|
||||
|
||||
```html
|
||||
<!-- 这是语句，不是表达式 -->
|
||||
{{ var a = 1 }}
|
||||
|
||||
<!-- 流控制也不会生效，请使用三元表达式 -->
|
||||
{{ if (ok) { return message } }}
|
||||
```
|
||||
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<span>content:{{name}}</span>
|
||||
</div>
|
||||
<script src="vue2.5.16.js"></script>
|
||||
<script>
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
name: 'smyhvae'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
运行结果：
|
||||
|
||||
20180506_2240.png
|
||||
|
||||
|
||||
## v-cloak
|
||||
|
||||
`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。
|
||||
|
||||
v-cloak指令和CSS 规则一起用的时候，能够**解决差值表达式闪烁的问题**（即：可以隐藏未编译的标签直到实例准备完毕）。
|
||||
|
||||
就拿上一段代码来举例，比如说，`{{name}}`这个内容，**在网速很慢的情况下，一开始会直接显示`{{name}}`这个内容**，等网络加载完成了，才会显示`smyhvae`。那这个**闪烁的问题**该怎么解决呢？
|
||||
|
||||
解决办法是：通过`v-cloak`隐藏`{{name}}`这个内容，当加载完毕后，再显示出来。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
|
||||
/*2、在样式表里设置：只要是有 v-cloak 属性的标签，我都让它隐藏。
|
||||
直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- 1、给 span 标签添加 v-cloak 属性 -->
|
||||
<span v-cloak>{{name}}</span>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="vue2.5.16.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
name: 'smyhvae'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
## v-text
|
||||
|
||||
v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<!--vue的版本：2.5.15-->
|
||||
<script src="vue.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="div1">
|
||||
<span v-text="name"></span>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#div1',
|
||||
data: {
|
||||
name: 'hello smyhvae'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
结果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 差值表达式和 v-text 的区别
|
||||
|
||||
```html
|
||||
<!-- 差值表达式 -->
|
||||
<span>content:{{name}}</span>
|
||||
|
||||
<!-- v-text -->
|
||||
<span v-text="name">/span>
|
||||
```
|
||||
|
||||
**区别1**： v-text 没有闪烁的问题，因为它是放在属性里的。
|
||||
|
||||
**区别2** :插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text 会**覆盖**元素中原本的内容。
|
||||
|
||||
为了解释区别2，我们来用代码举例：
|
||||
|
||||
```html
|
||||
<!-- 差值表达式 -->
|
||||
<p>content:++++++{{name}}------</p>
|
||||
|
||||
<!-- v-text -->
|
||||
<p v-text="name">------++++++</p>
|
||||
```
|
||||
|
||||
上方代码的演示结果：
|
||||
|
||||
20180506_2320.png
|
||||
|
||||
其实，第二行代码中，只要浏览器中还没有解析到`v-text="name"`的时候，会显示`------++++++`；当解析到`v-text="name"`的时候，name的值会直接替换`------++++++`。
|
||||
|
||||
|
||||
## v-html
|
||||
|
||||
|
||||
`v-text`是纯文本，而`v-html`会被解析成html元素。
|
||||
|
||||
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<p>{{msg}}</p>
|
||||
<p v-text="msg"></p>
|
||||
<p v-html="msg"></p>
|
||||
|
||||
</div>
|
||||
<script src="vue2.5.16.js"></script>
|
||||
<script>
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
msg: '<h1>我是一个大大的h1标题</h1>'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
运行结果：
|
||||
|
||||
20180506_2330.png
|
||||
|
||||
|
||||
## v-bind
|
||||
|
||||
`v-bind`：用于绑定属性。
|
||||
|
||||
比如说：
|
||||
|
||||
```html
|
||||
<img v-bind:src="imageSrc +'smyhvaeString'">
|
||||
|
||||
<div v-bind:style="{ fontSize: size + 'px' }"></div>
|
||||
```
|
||||
|
||||
|
||||
上方代码中，给属性加了 v-bind 之后，属性值里的整体内容是**表达式**，属性值里的`imageSrc`和`size`是Vue实例里面的**变量**。
|
||||
|
||||
也就是说， v-bind的属性值里，可以写合法的 js 表达式。
|
||||
|
||||
上面两行代码也可以简写成：
|
||||
|
||||
```html
|
||||
<img :src="imageSrc">
|
||||
|
||||
<div :style="{ fontSize: size + 'px' }"></div>
|
||||
```
|
||||
|
||||
**举例：**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="div1">
|
||||
<!-- value里的值只是简单的字符串 -->
|
||||
<input type="text" value="name">
|
||||
<!-- 加上 v-bind 之后，value里的值是 Vue 里的变量 -->
|
||||
<input type="text" v-bind:value="name">
|
||||
<!-- 超链接后面的path是 Vue 里面的变量 -->
|
||||
<a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#div1',
|
||||
data: {
|
||||
name: 'smyhvae',
|
||||
path: `2.html`
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
上面的代码中，我们给`value`这个属性绑定了值，此时这个值是一个变量。
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
## v-model：双向数据绑定
|
||||
|
||||
上面的一段中，我们通过v-bind，给`<input>`标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，`<input>`标签里的内容会自动更新。
|
||||
|
||||
可我现在要做的是：我在`<input>`标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。
|
||||
|
||||
代码举例如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<script src="vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<form action="#">
|
||||
<input type="text" id="username" v-model="myAccount.username">
|
||||
<input type="password" id="pwd" v-model="myAccount.userpwd">
|
||||
|
||||
<input type="submit" v-on:click="submit1" value="注册">
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
//上面的标签中采用v-model进行双向数据绑定，数据会自动更新到data里面来
|
||||
data: {
|
||||
name: 'smyhvae',
|
||||
myAccount: {username: '', userpwd: ''}
|
||||
},
|
||||
//在methods里绑定各种方法，根据业务需要进行操作
|
||||
methods: {
|
||||
submit1: function () {
|
||||
alert(this.myAccount.username + " pwd=" + this.myAccount.userpwd);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
此时，便可实现我们刚刚要求的双向数据绑定的效果。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## v-on：注册事件
|
||||
|
||||
### v-on 的用法举例
|
||||
@ -222,256 +590,6 @@
|
||||
上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。
|
||||
|
||||
|
||||
## 插值表达式 {{}}
|
||||
|
||||
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：
|
||||
|
||||
```html
|
||||
<span>Message: {{ msg }}</span>
|
||||
```
|
||||
|
||||
Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
|
||||
无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会**自动更新**。
|
||||
|
||||
`{{}}`对JavaScript 表达式支持，例如：
|
||||
|
||||
```javascript
|
||||
{{ number + 1 }}
|
||||
|
||||
{{ ok ? 'YES' : 'NO' }}
|
||||
|
||||
{{ name == 'smyhvae' ? 'true' : 'false' }}
|
||||
|
||||
{{ message.split('').reverse().join('') }}
|
||||
```
|
||||
|
||||
|
||||
但是有个限制就是，每个绑定都**只能包含单个表达式**，如下表达式无效：
|
||||
|
||||
```html
|
||||
<!-- 这是语句，不是表达式 -->
|
||||
{{ var a = 1 }}
|
||||
|
||||
<!-- 流控制也不会生效，请使用三元表达式 -->
|
||||
{{ if (ok) { return message } }}
|
||||
```
|
||||
|
||||
|
||||
## v-text
|
||||
|
||||
v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<!--vue的版本：2.5.15-->
|
||||
<script src="vue.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="div1">
|
||||
<span v-text="name"></span>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#div1',
|
||||
data: {
|
||||
name: 'hello smyhvae'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
结果：
|
||||
|
||||
|
||||
|
||||
|
||||
## v-html
|
||||
|
||||
|
||||
`v-text`是纯文本，而`v-html`会被解析成html元素。
|
||||
|
||||
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
|
||||
|
||||
|
||||
## v-cloak
|
||||
|
||||
`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。
|
||||
|
||||
|
||||
这个指令和CSS 规则一起用的时候，可以隐藏未编译的标签直到实例准备完毕。比如说，在网络很慢的情况下，通过`v-cloak`隐藏元素，当加载完毕后，再显示出来。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<script src="vue.js"></script>
|
||||
<style>
|
||||
|
||||
/*网络很慢时，在span上加上 v-cloak和css样式控制以后，浏览器在加载时会先把span隐藏起来。
|
||||
直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="div1">
|
||||
<span v-cloak>{{name}}</span>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#div1',
|
||||
data: {
|
||||
name: 'hello1 smyhvae22'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
## v-bind
|
||||
|
||||
`v-bind`：给html元素或者组件**动态绑定**一个或多个特性，例如动态绑定style和class。
|
||||
|
||||
比如说：
|
||||
|
||||
```html
|
||||
<img v-bind:src="imageSrc">
|
||||
|
||||
<div v-bind:style="{ fontSize: size + 'px' }"></div>
|
||||
```
|
||||
|
||||
|
||||
上方代码中的`imageSrc`和`size`其实是Vue实例里面的变量。
|
||||
|
||||
上面两行代码可以简写成：
|
||||
|
||||
```html
|
||||
<img :src="imageSrc">
|
||||
|
||||
<div :style="{ fontSize: size + 'px' }"></div>
|
||||
```
|
||||
|
||||
**举例：**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="div1">
|
||||
<!-- value里的值只是简单的字符串 -->
|
||||
<input type="text" value="name">
|
||||
<!-- 加上 v-bind 之后，value里的值是 Vue 里的变量 -->
|
||||
<input type="text" v-bind:value="name">
|
||||
<!-- 超链接后面的path是 Vue 里面的变量 -->
|
||||
<a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#div1',
|
||||
data: {
|
||||
name: 'smyhvae',
|
||||
path: `2.html`
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## v-model：双向数据绑定
|
||||
|
||||
上面的一段中，我们通过v-bind，给`<input>`标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，`<input>`标签里的内容会自动更新。
|
||||
|
||||
可我现在要做的是：我在`<input>`标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。
|
||||
|
||||
代码举例如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<script src="vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<form action="#">
|
||||
<input type="text" id="username" v-model="myAccount.username">
|
||||
<input type="password" id="pwd" v-model="myAccount.userpwd">
|
||||
|
||||
<input type="submit" v-on:click="submit1" value="注册">
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
//上面的标签中采用v-model进行双向数据绑定，数据会自动更新到data里面来
|
||||
data: {
|
||||
name: 'smyhvae',
|
||||
myAccount: {username: '', userpwd: ''}
|
||||
},
|
||||
//在methods里绑定各种方法，根据业务需要进行操作
|
||||
methods: {
|
||||
submit1: function () {
|
||||
alert(this.myAccount.username + " pwd=" + this.myAccount.userpwd);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
此时，便可实现我们刚刚要求的双向数据绑定的效果。
|
||||
|
||||
## v-for：for循环
|
||||
|
||||
**作用**：根据数组中的元素遍历指定模板内容生成内容。
|
||||
|
||||
@ -65,7 +65,7 @@ webpack.config.js : 是一个node模块，返回一个 json 格式的配置信
|
||||
{
|
||||
"name": "webpackdemo",
|
||||
"version": "1.0.0"
|
||||
}s
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user