<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <title>第一个VUE程序</title> <!-- 安装vue --> <!-- 当使用script引入后就已经拥有了一个vue的全局变量 --> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h1>{{msg}}</h1> </div> <script> // 第一步创建VUE实例 // 为什么要new Vue(),不能直接调用Vue()函数吗? // 不行,因为直接调用,不创建实例会报错,必须要构造函数创建出来 //源码创建对象时传递的对象options? //options表示多个选项,option中文意思就是选项 // Vue框架要求这个options参数必须是一个纯粹的JS对象{} // {}这个对象中可以编写大量的key:value对象键值对 // 一个键值对就是一个配置项 // 可以配置多个配置项,template就是一个配置项 // 关于template配置项,template翻译为模板 // 用来指定模板语句,模板语句是字符串形式的 // 什么是模板语句 // Vue框架自己制定了一套含有特殊含义的特殊符号 // Vue模板语句是Vue框架自己搞得语法规则 // 我们的编写Vue框架的模板语句要遵循Vue的语法规则 // Vue框架的模板语句可以是一个纯粹的HTML代码,也可以是Vue的特殊规则 // 也可以是html代码加上Vue的特殊规则 // template后面的模板语句会被Vue的编译器进行编译,转换成浏览器能够识别的HTML代码 const myVue = new Vue({ //模板语句 template : "<h1>Hello Vue!</h1>", el : "#app", data : { msg : "Hello" } }); // 第二步 // Vue实例都有一个$mount()方法,这个方法的作用是把这个Vue实例挂载到指定位置 // 这段代码就是把我们创建出来的Vue实例对象myVue挂载到app这个div盒子上 // #app是ID选择器,和CSS语法一致 myVue.$mount('#app'); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>第一个VUE程序</title>
<!-- 安装vue -->
<!-- 当使用script引入后就已经拥有了一个vue的全局变量 -->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
// 第一步创建VUE实例
// 为什么要new Vue(),不能直接调用Vue()函数吗?
// 不行,因为直接调用,不创建实例会报错,必须要构造函数创建出来
//源码创建对象时传递的对象options?
//options表示多个选项,option中文意思就是选项
// Vue框架要求这个options参数必须是一个纯粹的JS对象{}
// {}这个对象中可以编写大量的key:value对象键值对
// 一个键值对就是一个配置项
// 可以配置多个配置项,template就是一个配置项
// 关于template配置项,template翻译为模板
// 用来指定模板语句,模板语句是字符串形式的
// 什么是模板语句
// Vue框架自己制定了一套含有特殊含义的特殊符号
// Vue模板语句是Vue框架自己搞得语法规则
// 我们的编写Vue框架的模板语句要遵循Vue的语法规则
// Vue框架的模板语句可以是一个纯粹的HTML代码,也可以是Vue的特殊规则
// 也可以是html代码加上Vue的特殊规则
// template后面的模板语句会被Vue的编译器进行编译,转换成浏览器能够识别的HTML代码
const myVue = new Vue({
//模板语句
template : "<h1>Hello Vue!</h1>",
el : "#app",
data : {
msg : "Hello"
}
});
// 第二步
// Vue实例都有一个$mount()方法,这个方法的作用是把这个Vue实例挂载到指定位置
// 这段代码就是把我们创建出来的Vue实例对象myVue挂载到app这个div盒子上
// #app是ID选择器,和CSS语法一致
myVue.$mount('#app');
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h1>{{msg}}</h1> </div> <script> const vm = new Vue({ el : "#app", data : { msg : "msg" }, // 优先编译template成立 template : "<h1>哈哈哈哈哈</h1>" }).$mount("#app"); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
const vm = new Vue({
el : "#app",
data : {
msg : "msg"
},
// 优先编译template成立
template : "<h1>哈哈哈哈哈</h1>"
}).$mount("#app");
</script>
</body>
</html>