1. Node.js
概述：Node 是一个软件，它可以让JavaScript 运行在上面。
- node 只能运行.js 文件
- node 运行方法：node XXX.js
- node 平台没有dom,bom概念
2. npm
概述：npm 类似 IOS的pod flutter的pub android的git
3. Vue
概述：前端三大框架
- Angular (MVC 框架)
- React （2013年facebook开源)
- Vue (2014年中国在校大学生尤雨溪)
Vue:Vue 是前端中的javascript 框架，源码都封装到了.js的一个文件中。因此我们需要获取到源码
Vue 基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>我是蔡磊，我今年{{age}}岁了</h1>
</div>
</body>
</html>
<script>
//引入vue.js 后 其对外暴露了一个Vue的构造函数
var ve = new Vue({
// 通过el 让vue实例和便签联系在一起
el:"#app",
//vue 实例数据来源
data:{
age:100
}
})
</script>
4. Vue 框架中常用指令
vue框架提供了很多指令，都是以V*** 开头
4.1 v-text ,v-html 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 相当于 <h1>{{age}}</h1> -->
<h1 v-text="age"></h1>
</div>
</body>
</html>
<script>
//引入vue.js 后 其对外暴露了一个Vue的构造函数
var ve = new Vue({
// 通过el 让vue实例和便签联系在一起
el:"#app",
//vue 实例数据来源
data:{
age:"我是Vue 哈哈哈哈哈"
}
})
</script>
4.2 v-show 指令
v-show 底层是css的display ，控制标签的显示和隐藏
选项卡练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click = "add('路飞')">路飞</button>
<button v-on:click = "add('娜美')">娜美</button>
<button v-on:click = "add('索隆')">索隆</button>
<ul v-show = " '路飞' === info">
<li>路飞</li>
<li>路飞</li>
<li>路飞</li>
<li>路飞</li>
<li>路飞</li>
<li>路飞</li>
<li>路飞</li>
</ul>
<ul v-show = " '娜美' === info">
<li>娜美</li>
<li>娜美</li>
<li>娜美</li>
<li>娜美</li>
<li>娜美</li>
<li>娜美</li>
<li>娜美</li>
</ul>
<ul v-show = " '索隆' === info">
<li>索隆</li>
<li>索隆</li>
<li>索隆</li>
<li>索隆</li>
<li>索隆</li>
<li>索隆</li>
<li>索隆</li>
</ul>
</div>
</body>
</html>
<script>
//引入vue.js 后 其对外暴露了一个Vue的构造函数
var ve = new Vue({
// 通过el 让vue实例和便签联系在一起
el:"#app",
//vue 实例数据来源
data:{
info:"路飞"
},
methods:{
add(a){
this.info = a;
}
}
})
//
</script>