Environment setup
Node and NPM
NPM is a module management tool provided by Node. It is very convenient to download and install many front-end frameworks, including Jquery, AngularJS, and VueJs. For the convenience of later learning, we first install node and NPM tools.
Download Node.js
Download address: https://nodejs.org/en/
完成以后,在控制台输入: node -v
NPM
Node comes with NPM, enter it in the console to npm -v
view
npm install nrm -g
Then use the nrm ls
command to view the list of npm repositories, the one with * is the currently selected mirror repository:
pass nrm use taobao
to specify the mirror source to be used:
then pass nrm test npm
to test the speed:
Install VUE
Install Vue, enter the command: npm install vue --save
single binding code display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>简单学习一门前端语言,这门语言叫做{
{name}}</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<!--<script src="node_modules/vue/dist/vue.js"/>这样写VUE无法渲染-->
<script>
const demo = new Vue({
el: "#app",
data: {
name: "VUE"
}
});
</script>
</html>
v-model two-way binding
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="num"/>
<h2>简单学习一门前端语言,这门语言叫做{
{name}}</h2>
<h3>我需要学习更多的语言,与时俱进</h3>
<h4>{
{num}}加油</h4>
<button v-on:click="num++" >点我</button>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const demo = new Vue({
el: "#app",
data: {
name: "VUE",
num:1
}
});
</script>
</html>
Vue create instance
Pass in an object in the constructor, and declare various data and methods required by Vue in the object, including: 1.el; specify template elements such as
var vueLe = new Vue(le:"#app") <div id="app"></div>
2.data; for view rendering data. E.g:
<script src="node_modules/vue/dist/vue.js"></script><script>
const demo = new Vue({
el: "#app",
data: {
name: "VUE",
num:1
}
});
</script>
<div id="app">{
{name}}</div>
3.methods:方法;
<script src="node_modules/vue/dist/vue.js"></script><script>
<script>
var vm = new Vue({
el:"#app",
data:{
num: 0
},
methods:{
add:function(){
// this代表的当前vue实例
this.num++;
}
}
})
</script>
<div id="app">
{
{num}}
<button v-on:click="add">加</button>
</div>