目录
前言
当搭建好Vue开发环境之后,想让Vue开始工作, 我们需要做如下步骤。
准备容器
1. 在html的body里准备一个div容器,有id,方便后续使用css id选择器定位。如下:
2. Vue插值语法介绍,当使用变量时候,可以使用{{X}}来代表变量, 容器里变化的内容放到Vue实例里托管。
<!--准备好一个容器-->
<div id="root">
<!-- //使用插值语法, 两组{{}}, 里面直接写上名字。-->
<h1>hello, {{name}}</h1>
<h1>hello, {{age}}</h1>
<!-- //容器里变化的东西放到实例里面托管。-->
</div>
创建Vue实例
1. 在script中创建vue实例,并且与容器关联, 通过el : '#root'去关联,i.e. 找到id为root的元素。
2. data : 容器的数据源,数据名字与容器内命名一致即可。
代码如下:
//创建vue实例
//实例对象与容器创建关系
new Vue({
el:'#root', // 通过css id选择器找到root, 值为css选择器。 el用于指定当前vue实例为哪个容器服务,通常为css选择器去定位。
data :{
name : '大力pig',
age : '18'
}
})
代码演示
整段代码如下,创建一个html文件即可。可以通过浏览器打开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<script type="text/javascript" src="../js/vue.js">
</script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- //使用插值语法, 两组{{}}, 里面直接写上名字。-->
<h1>hello, {{name}}</h1>
<h1>hello, {{age}}</h1>
<!-- //容器里变化的东西放到实例里面托管。-->
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue报生产提示
//创建vue实例
//实例对象与容器创建关系
new Vue({
el:'#root', // 通过css id选择器找到root, 值为css选择器。 el用于指定当前vue实例为哪个容器服务,通常为css选择器去定位。
data :{
name : '大力pig',
age : '18'
}
})
</script>
</body>
</html>
结果演示
总结: 想让vue工作就必须创建实例,传入对象,root容器混入了vue的特殊写法,root容器里的代码被称为vue模板。