vue学习笔记系列（一）：环境配置与第一个例子
2019-01-01 本文已影响4人
i高安
前言
新的一年，新的面貌。作为一个phper，前端学的并不好，之前的我有点好高骛远了，昨晚在和小伙伴一起跨年之余反思了一下自己，嘿嘿。
开一个学习笔记，趁毕业之前好好充实一波自我，加油！
-1-环境与开发工具
IDE我选择用webstorm，因为后台开发时我用的是phpstorm，所以这个系列的IDE用的比较顺手。当然也可以选择visual studio。
安装nodejs
sudo apt-get install nodejs
安装npm
sudo apt-get install npm
安装淘宝镜像
sudo npm config set registry https://registry.npm.taobao.org
安装n管理器
sudo npm install n -g
安装nvm，地址https://github.com/creationix/nvm#installation
wget -qO-https：//raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh
查看nvm远程仓库node可以下载的版本
nvm ls-remote
使用nvm install 版本号就可以下载了：
已是最新版本
安装vue-cli
npm i -g install vue-cli
大功告成！
-2-第一个例子
在head里面引入vue：
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
来一段小demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg{
color:red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
</head>
<body>
<div class="bg">
Hello World!
<!--双括号里面msg对应data里面的msg-->
{{msg}}
</div>
</body>
<script>
new Vue({
el:'.bg',
//data存放数据
data: {
msg:'Hello Vue!'
}
})
</script>
</html>
image.png
如果有两个{{msg}},则优先绑定上面的，这时可以用id绑定：
<div class="bg">
Hello World!
<!--双括号里面msg对应data里面的msg-->
{{msg}}
</div>
<div class="bg">
<!--如果有两个{{msg}},则优先绑定上面的，这时可以用id绑定-->
{{msg}}
</div>
</div>
image.png
用一个大的div套住两个div，给一个id绑定：
<div id="app">
<div class="bg" id="">
Hello World!
<!--双括号里面msg对应data里面的msg-->
{{msg}}
</div>
<div class="bg">
<!--如果有两个{{msg}},则优先绑定上面的，这时可以用id绑定-->
{{msg}}
</div>
</div>
</body>
<script>
new Vue({
el:'#app',
//data存放数据
data: {
msg:'Hello Vue!'
}
})
</script>
image.png
未完待续。。。
