总结性内容:
1.想让Vue工作,就必须创建一个Vue的实例,而且要传入一个配置对象
2.root容器中的代码依然符合html规范,只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为Vue模板
<!DOCtype html>
<html>
<head>
<meta charset="UTF-8">
<title>初识Vue</title>
<script type="text/javascript" src="js-vue/vue.js"></script>
</head>
<body>
<div>
<h1>Hello,Good</h1>
</div>
<!-- 把需要变化的量给Vue实例保管-->
<div id="root">
<!-- Vue的插值语法 两组花括号 中间+一个类-->
<h1>Hello,{{name}}}</h1>
<h2>我的年龄是:{{age}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//用于阻止Vue在启动时生成生产提示
//创建Vue实例
new Vue({
el:'#root',//el:元素element #root是一个选择root的id的id选择器
//el用于指定当前的Vue实例,为哪个容器服务,值通常为css中的选择器
//el:document.getElementById('root');
data:{//data中用于储存数据,数据供el所指定的容器去使用,值我们暂时写成一个对象
name:'HHHHHHH',
age:18
}
});//只传一个对象,一个配置对象
/*
总结性内容:
1.想让Vue工作,就必须创建一个Vue的实例,而且要传入一个配置对象
2.root容器中的代码依然符合html规范,只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为Vue模板
*/
</script>
</body>
</html>