前言
- 作为一个后端程序员（？？码农？），一直因为没办法将写好的web好好的展示出来，苦恼于没有前端配合，前端还能用node去自己写点后端，今天决定学习vue，敲开前端的大门，当家作主，翻身做主人！让自己也可以单枪匹马写好一个web！顺便上一下github地址vue项目代码
提前准备
- 安装好node环境
- 安装好npm yarn
- 编译器使用 vscode
- 建立一个新的文件夹，包含index.html 和vue.js
动手！
- 打开vue的官网，点击教程，点击安装
- 点击开发版本，将里面的代码copy到提前创建好的vue.js上
- 打开html，引进vue.js
这个时候就可以开始敲代码了！
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue 入门</title>
<script src = "./vue.js"> </script>
</head>
<body>
<div id="root">
<div @click="handleClick"> {{content}} </div>
</div>
<script>
new Vue({
el : "#root",
data: {
content : "hello"
},
methods: {
handleClick:function(){
this.content = "world"
}
}
})
</script>
</body>
</html>
- 效果
- 点击hello后
学习笔记
-
在script标签中创建一个Vue实例 在body上写一个div
-
vue实例中包含 el ：实例需要挂载的地方，此处是id为root的div
-
data：实例的数据
-
methods 实例可能用到的方法，这里写了一个handleClick为名的方法
-
@click 绑定一个函数，当点击的时候触发函数，其实和 v-on:click = "handleClick"是等价的
-
{{content}} : 代表将这个挂载点对应的实例的data里名为content的参数的值输出
-
当我们点击hellow的时候触发函数handleClick,将content的值改变，这个时候页面上对应的输出的值也将改变