vue.js
- Vue是什么?
- 一套渐进式
JavaScript
框架
- Vue干什么用的?
- 作用是
构建用户界面
- 有什么特点?
- 特点是:
渐进式
、只需要关注数据
基本使用
vue的挂载点
- 1.挂载点el作用 : 告诉vue实例,你要将data中的数据渲染到哪一个试图
- 2.注意点
- (1)挂载点可以使用 id选择器(vue推荐使用) 类选择器 标签选择器
- 开发中基本上都是id选择器,保证HTML标签唯一性
- 如果你希望data中的数据能够对多个元素生效,可以将vue实例挂载到父元素中
- (2)如果选择器选中了多个元素,只会选择第一个元素(底层是queryselector)
- (3)挂载点不能设置为
html
和body
标签 (程序报错)
- (1)挂载点可以使用 id选择器(vue推荐使用) 类选择器 标签选择器
<!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>
<!-- 1.导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.HTML结构 -->
<div id="app">
<div id="app">
{{ message }}
</div>
<hr>
<div id="box" class="container">
{{ message }}
</div>
<hr>
<div class="container">
{{ message }}
</div>
</div>
<script>
/* 3.初始化配置 */
/*
(1)Vue是导入vue.js之后得到的一个全局构造函数
(2)调用Vue构造函数 创建一个vue实例对象
*/
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
- el: element 用来设置vue实例的挂载点(将数据渲染到哪个元素身上)
- data:要渲染的数据
- 数据驱动:vue会根据data中的数据,自动渲染页面(无需DOM操作)
- methods: 保存vue里的方法
插值表达式
- Vue会自动将data对象中的数据渲染到视图
- 注意点:
(1) {{ }} : 插值表达式,也叫胡子语法
(2) 插值表达式作用:将数据渲染到页面
(3) 支持二元运算 {{ age + 1 }}
(4) 支持三元运算 {{ age>30?‘老男人’:‘小鲜肉’ }}
(5) 支持数组与对象的取值语法
(6) 不支持分支语法与循环语法
Vue常用指令
Vue指令的本质是 : Vue为HTML标签新增的一些属性
在Vue中每一个指令都是以v-开头 (用于区分HTML标签原生属性)