Vue的介绍
npm安装Vue
在vscode中, 打开文件夹, 创建学习vue的文件夹
使用npm init -y命令, 初始化项目
npm init -y
生成了如下的json配置文件
使用node安装vue, 执行如下的命令, 报错如下
npm install vue
根据提示信息, 说了我的项目名称与vue的依赖重名了.
Did you name your project the same
npm ERR! as the dependency you're installing?
解决办法, 把项目重命名. 文件夹从重命名为vue2 , 同时 ,json的配置文件, 也要重命名为vue2
再次执行npm install vue, 可以看到没有报错
并且生成了如下的文件
Vue hello world
新建立一个index.html
demo代码如下, 使用name的动态取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./node_modules/vue/dist/vue.js"></script>
<body>
<div id="txt">
<h1> {{name}}, 唱歌很好听. </h1>
</div>
<script>
let vm=new Vue({
el: "#txt",
data: {
name: "周杰伦"
}
})
</script>
</body>
</html>
页面显示如下
在控制台中, 也可以实时的显示name的值
修改name的值为林俊杰. 可以看到页面上直接也显示成了林俊杰
