环境搭建
Node和NPM
NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具。
下载Node.js
下载地址:https://nodejs.org/en/
完成以后,在控制台输入: node -v
NPM
Node自带了NPM了,在控制台输入npm -v
查看
npm install nrm -g
然后通过nrm ls
命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:
通过nrm use taobao
来指定要使用的镜像源:
然后通过nrm test npm
来测试速度:
安装VUE
安装Vue,输入命令:npm install vue --save
单项绑定代码展示
<!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双向绑定
<!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 创建实例
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
1.el;指定模板元素例如
var vueLe = new Vue(le:"#app") <div id="app"></div>
2.data;用于视图渲染数据。例如:
<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>