|
Vue 简介：
? ? ? ? ①JavaScript框架；②简化DOM操作； ③响应式数据驱动
官方文档： Vue.js
开发工具：VSCode (Live Server 插件)
Vue 实例的作用范围：
? ? ? ? ? ?Vue会管理 el（设置Vue实例挂载） 选项命中的元素及其内部的后代元素；可使用其他选择器，但建议使用ID选择器；可以使用其他双标签，不能使用<HTML><BODY>。
data数据对象：
? ? ? ? ? ? Vue数据定义定义在data中；data可以是复杂类型数据；渲染复杂类型数据，遵守JS语法。
<!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>
<!-- 开发环境版本，包含帮助命令行警告-->
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
{{meassage}}
<h2>{{obj.pram1}}{{obj.pram2}}</h2>
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue",
obj:{
pram1:"Pram1",
pram2:"Pram2"
},
list:["one","two","three"]
}
})
</script>
</body>
</html>
|