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标签原生属性）
