1 下载vue.js
进入官网
下载两个版本的vue.js
开发版本和生成版本的区别
开发版本体量更大，包含完整的警告和调试模式
生成版本体量更小，删除了警告
2 打开VSCode
新建一个空文件夹vuebase，用vscode打开
在下面新建两个文件夹，一个用来放代码文件，一个放vue.js文件，如下图
3 新建一个html文件
文件名：初识vue.html
3.1 引入vue.js
<!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>
<!-- 引入开发板vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<script type="text/javascript" >
Vue.config.productiontip = false //设置为 false 以阻止 vue 在启动时生成生产提示
</script>
</script>
</body>
</html>
两个script标签
1）引入vue.js
<script type="text/javascript" src="../js/vue.js"></script>
2) 阻止 vue 在启动时生成生产提示(不重要)
<script type="text/javascript" >
Vue.config.productiontip = false //设置为 false 以阻止 vue 在启动时生成生产提示
</script>
如果我们把这个去掉，右键open with live sever从浏览器打开文件
f12进入控制台，发现它有个提示，如下图
意思是说，你用的是开发版本的vue.js，在生产环境中最好要用生产版本的vue.min.js
其实这个提示无所谓，不影响什么，如果看着不爽，那么设置Vue.config.productiontip = false就可去掉这个提示
加上这个设置后，再看控制台，发现这个提示没有了
3.2 写一个容器和一个实例
<body>
<script type="text/javascript" >
Vue.config.productiontip = false //设置为 false 以阻止 vue 在启动时生成生产提示
</script>
<div id="root">
<h1>hello {{name}}</h1>
</div>
<script type="text/javascript" >
//创建vue实例
new Vue({
el:'#root', //用于指定当前vue实例为那个容器服务，值通常为css选择器字符串
data:{
name:"china"
}
})
</script>
</body>
上面代码中<div id=”root”></div>就是一个容器，new Vue({})就是创建了一个vue实例，容器和实例一一对应
看效果
3.2.1 容器
1）id
id唯一
<div id="root">
<h1>hello {{name}}</h1>
</div>
2){{}}数据绑定
和vue实例中的data属性对应
3.2.2 实例
1）el属性，用来对应容器，’#xxx’，表示通过id值来对应,’.xx表示’通过class值来对应
通过id
通过class
2）data属性，用来绑定容器中的{{}}
3.3 关于{{}}说明
里面能填入js表达式
如果这里填的是变量，那么vue实例data属性中必须有对应的属性填充
示例
效果
4 小结
原创文章，作者：sunnyman218，如若转载，请注明出处：https://blog.ytso.com/268233.html