“VUE 基础”的版本间的差异
跳到导航
跳到搜索
Jihongchang（讨论 | 贡献） |
Jihongchang（讨论 | 贡献） （→el 挂载点） |
||
| 第54行： | 第54行： | ||
* 创建 Vue 实例对象，设置 <u>el</u> 属性和 <u>data</u> 属性 | * 创建 Vue 实例对象，设置 <u>el</u> 属性和 <u>data</u> 属性 | ||
* 使用简洁的<u>模板语法</u>把数据渲染到页面上 | * 使用简洁的<u>模板语法</u>把数据渲染到页面上 | ||
| + | |||
| + | |||
=== el 挂载点 === | === el 挂载点 === | ||
| − | https://www.bilibili.com/video/BV12J411m7MG/?p=4 | + | https://www.bilibili.com/video/BV12J411m7MG/?p=4<syntaxhighlight lang="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>el:挂载点</title> | ||
| + | </head> | ||
| + | <body id="body"> | ||
| + | <!-- el:挂载点对于外部元素不起作用 --> | ||
| + | {{message}} | ||
| + | <div id="app"> | ||
| + | {{message}} | ||
| + | <!-- el:挂载点对于内部嵌套元素起作用 --> | ||
| + | <span>{{message}}</span> | ||
| + | </div> | ||
| + | <!-- <p id="app"> | ||
| + | {{message}} | ||
| + | </p> --> | ||
| + | <!-- <h2 id="app"> | ||
| + | {{message}} | ||
| + | </h2> --> | ||
| + | <!-- el:挂载点对于任意成对开闭的标签元素都起作用， | ||
| + | 但对单标签不起作用; | ||
| + | 对 HTML、body 标签不起作用 | ||
| + | --> | ||
| + | <!-- 开发环境版本，包含了有帮助的命令行警告 --> | ||
| + | <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> | ||
| + | <script> | ||
| + | var app = new Vue({ | ||
| + | //el:"#app", | ||
| + | el: "#body", | ||
| + | data:{ | ||
| + | message:"黑马程序员" | ||
| + | } | ||
| + | }) | ||
| + | </script> | ||
| + | </body> | ||
| + | </html> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | ==== 结论 ==== | ||
| + | |||
| + | ===== Vue 实例的作用范围是什么？ ===== | ||
| + | Vue 会管理 el 选项<u>命中的元素</u>及其内部的<u>后代元素</u> | ||
| + | |||
| + | ===== 是否可以使用其他的选择器？ ===== | ||
| + | 可以使用其他的选择器，但是建议使用 <u>ID 选择器</u> | ||
2023年6月7日 (三) 05:54的版本
https://www.bilibili.com/video/BV12J411m7MG/?p=2
开发工具
VSCode、VSCode 安装 Live Server 插件
Vue 简介
1.JavaScript 框架
2.简化 DOM 操作
3.响应式数据驱动
第一个 Vue 程序
https://www.bilibili.com/video/BV12J411m7MG/?p=3
向导：https://v2.cn.vuejs.org/v2/guide/
<!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>Vue基础</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</body>
</html>
{{message}} 是插值表达式
data 是 Vue 实例中用到的数据
步骤
- 导入开发版本的 Vue.js
- 创建 Vue 实例对象，设置 el 属性和 data 属性
- 使用简洁的模板语法把数据渲染到页面上
el 挂载点
https://www.bilibili.com/video/BV12J411m7MG/?p=4
<!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>el:挂载点</title>
</head>
<body id="body">
<!-- el:挂载点对于外部元素不起作用 -->
{{message}}
<div id="app">
{{message}}
<!-- el:挂载点对于内部嵌套元素起作用 -->
<span>{{message}}</span>
</div>
<!-- <p id="app">
{{message}}
</p> -->
<!-- <h2 id="app">
{{message}}
</h2> -->
<!-- el:挂载点对于任意成对开闭的标签元素都起作用，
但对单标签不起作用;
对 HTML、body 标签不起作用
-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
//el:"#app",
el: "#body",
data:{
message:"黑马程序员"
}
})
</script>
</body>
</html>
结论
Vue 实例的作用范围是什么？
Vue 会管理 el 选项命中的元素及其内部的后代元素
是否可以使用其他的选择器？
可以使用其他的选择器，但是建议使用 ID 选择器