一、介绍
1、Vue.js 是什么
Vue (读音 /vju
ː
/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官方网站：
https://cn.vuejs.org
2、初始Vue.js
创建
demo.html
1
<!-- id
标识
vue
作用的范围
-->
2
<div
id
=
"app"
>
3
<!-- {{}}
插值表达式，绑定
vue
中的
data
数据
-->
4
{{ message }}
5
</div>
6
<script
src
=
"vue.min.js"
></script>
7
<script>
8
9
//
创建一个
vue
对象
10
new
Vue({
11
el:
'#app'
,
//
绑定
vue
作用的范围
12
data: {
//
定义页面中显示的模型数据
13
message:
'Hello Vue!'
14
}
15
})
16
17
</script>
这就是声明式渲染：
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM 的系统
这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到
DOM对象，然后进行一系列的节点操作
在vs code中创建代码片段：
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：
vue-html.code-
snippets
注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空
格键”的空格
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}测试
二、基本语法
1、基本数据渲染和指令
创建
01-
基本数据渲染和指令
.html
你看到的
v-bind
特性被称为指令。指令带有前缀
v-
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个
冒号
（:）
1
data: {
2
content:
'
我是标题
'
,
3
message:
'
页面加载于
'
+
new
Date().toLocaleString()
4
}
1
<!--
如果要将模型数据绑定在
html
属性中，则使用
v-bind
指令
2
此时
title
中显示的是模型数据
3
-->
4
<h1
v-bind:title
=
"message"
>
5
{{content}}
6
</h1>
7
8
<!-- v-bind
指令的简写形式： 冒号（
:
）
-->
9
<h1
:title
=
"message"
>
10
{{content}}
11
</h1>
2、双向数据绑定
创建
02-
双向数据绑定
.html
双向数据绑定和单向数据绑定：使用
v-model
进行双向数据绑定
1
data: {
2
searchMap:{
3
keyWord:
'
尚硅谷
'
4
}
5
}
1
<!-- v-bind:value
只能进行单向的数据渲染
-->
2
<input
type
=
"text"
v-bind:value
=
"searchMap.keyWord"
>
3
<!-- v-model
可以进行双向的数据绑定
-->
4
<input
type
=
"text"
v-model
=
"searchMap.keyWord"
>
5
6
<p>
您要查询的是：
{{searchMap.keyWord}}
</p>
3、事件
创建
03-
事件
.html
需求：
点击查询按钮，按照输入框中输入的内容查找公司相关信息
在前面的例子基础上，data节点中增加 result，增加 methods节点 并定义 search方法
1
data: {
2
searchMap:{
3
keyWord:
'
尚硅谷
'
4
},
5
//
查询结果
6
result: {}
7
},
8
methods:{
9
search(){
10
console.log(
'search'
)
11
//TODO
12
}
13
}
html
中增加
button
和
p
使用
v-on
进行数件处理，
v-on:click
表示处理鼠标点击事件，事件调用的方法定义在
vue
对象声明的
methods
节点中
1
<!-- v-on
指令绑定事件，
click
指定绑定的事件类型，事件发生时调用
vue
中
methods
节点中定义的方法
2
<button
v-on:click
=
"search()"
>
查询
</button>
3
4
<p>
您要查询的是：
{{searchMap.keyWord}}
</p>
5
<p><a
v-bind:href
=
"result.site"
target
=
"_blank"
>
{{result.title}}
</a></p>
完善
search
方法
1
search(){
2
console.log(
'search'
);
3
this
.result = {
4
"title"
:
"
尚硅谷
"
,
5
"site"
:
"http://www.atguigu.com"
6
}
7
}
简写
1
<!-- v-on
指令的简写形式
@ -->
2
<button
@click
=
"search()"
>
查询
</button>
4、修饰符
创建
04-
修饰符
.html
修饰符
(Modifiers)
是以半角句号
（.）
指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，
.prevent
修饰符告诉
v-on
指令对于触发的事件调用
event.preventDefault()
：
即阻止事件原本的默认行为
1
data: {
2
user: {}
3
}
1
<!--
修饰符用于指出一个指令应该以特殊方式绑定。
2
这里的
.prevent
修饰符告诉
v-on
指令对于触发的事件调用
js
的
event.preventDefault()
：
3
即阻止表单提交的默认行为
-->
4
<form
action
=
"save"
v-on:submit.prevent
=
"onSubmit"
>
5
<label
for
=
"username"
>
6
<input
type
=
"text"
id
=
"username"
v-model
=
"user.username"
>
7
<button
type
=
"submit"
>
保存
</button>
8
</label>
9
</form>
1
methods: {
2
onSubmit() {
3
if
(
this
.user.username) {
4
console.log(
'
提交表单
'
)
5
}
else
{
6
alert(
'
请输入用户名
'
)
7
}
8
}
9
}
5、条件渲染
创建
05-
条件渲染
.html
v-if
：条件指令
1
data: {
2
ok:
false
3
}
注意：
单个复选框绑定到布尔值
1
<input
type
=
"checkbox"
v-model
=
"ok"
>
同意许可协议
2
<!-- v:if
条件指令：还有
v-else
、
v-else-if
切换开销大
-->
3
<h1
v-if
=
"ok"
>
if
：
Lorem ipsum dolor sit amet.
</h1>
4
<h1
v-else
>
no
</h1>
v-show
：条件指令
使用
v-show
完成和上面相同的功能
1
<!-- v:show
条件指令 初始渲染开销大
-->
2
<h1
v-show
=
"ok"
>
show
：
Lorem ipsum dolor sit amet.
</h1>
3
<h1
v-show
=
"!ok"
>
no
</h1>
v-if
是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if
也是
惰性的
：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，
v-show
就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，
v-if
有更高的切换开销，而
v-show
有更高的初始渲染开销。因此，如果需要非
常频繁地切换，则使用
v-show
较好；如果在运行时条件很少改变，则使用
v-if
较好。
6、列表渲染
创建
06-
列表渲染
.html
v-for
：列表循环指令
例
1
：简单的列表渲染
1
<!-- 1
、简单的列表渲染
-->
2
<ul>
3
<li
v-for
=
"n in 10"
>
{{ n }}
</li>
4
</ul>
5
<ul>
6
<!--
如果想获取索引，则使用
index
关键字，注意，圆括号中的
index
必须放在后面
-->
7
<li
v-for
=
"(n, index) in 5"
>
{{ n }} - {{ index }}
</li>
8
</ul>
例
2
：遍历数据列表
1
data: {
2
userList: [
3
{ id:
1
, username:
'helen'
, age:
18
},
4
{ id:
2
, username:
'peter'
, age:
28
},
5
{ id:
3
, username:
'andy'
, age:
38
}
6
]
7
}
1
<!-- 2
、遍历数据列表
-->
2
<table
border
=
"1"
>
3
<!-- <tr v-for="item in userList"></tr> -->
4
<tr
v-for
=
"(item, index) in userList"
>
5
<td>
{{index}}
</td>
6
<td>
{{item.id}}
</td>
7
<td>
{{item.username}}
</td>
8
<td>
{{item.age}}
</td>
9
</tr>
10
</table>
1339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
