一、node.js的概念
- 什么是node.js？
nodejs不是一个js框架nodejs是js运行时，运行环境，类比java中jvm，简单的就是node.js可以解析和执行javeScript代码，以前只有浏览器可以解析执行JaveScript代码，
现到的javeScript可以完全脱离浏览器来运行，一切都归功于node.js、
nodejs构建于Chrome的V8引擎[目前解析执行JaveScript最快的]之上：代码只是具有特定格式的字符串而已，引擎可以解析和运行代码 - 没有Bom,Dom
在node这个javeScript执行环境中为javeScript提供了一些服务器基本的操作：比如文件读写，网络
服务的构建，网络通信，http服务器等处理
node.js特性：事件驱动，非阻塞IO模型[异步]，而且轻量和高效
使用包管理器npm，npm是世界上最大的开源库生态系统，绝大多数JaceScript相关的包都存放了npm上
二、NPM
- 什么是npm
npm全称为Node Package Manager，是一个基于Node.js的包管理器
相当于Java中的maven项目管理工具 - 支持从服务器下载别人编写的第三方包到本地使用
- 从服务器下载并安装别人编写的命令行程序到本地使用
- 将自己编写的包或命令行程序上传到NPM服务器供别人使用
三、NodeJS&npm的安装
NodeJs下载：https://nodejs.org/en/download
安装
安装完成查看
安装完成Node应该自带了NPM了，在控制台输入npm -v查看：
升级：npm install npm@latest -g
四、在idea中支持node.js
- 需要安装插件
在setting中的plugin中搜索然后安装
安装完成后在底部的terminal输入指令测试
- 创建前端项目
-
然后输入指令
初始化：npm init -y(跳过) -----相当于建了一个maven工程 -
安装模块：
全局安装(所有项目都能用)
npm install -g vue
npm -g root 安装路径
局部安装(当前项目使用)
npm install/i vue
查看某个模块：npm list vue
列表模块：npm ls
卸载模块：npm uninstall vue
更新模块：npm update vue
运行工程：npm run dev/test/online
编译工程：npm run build -
为什么使用vue框架要在node.js环境下
如果你只是想单纯的使用vue做你的前端开发的辅助插件的话，那么你只需要直接script引用vue.js便也可以实现vue的双向绑定的功能
而至于node.js，如果一定要说的话，就是，node.js有提供丰富的npm插件供你使用，如果你需要使用vue搭建cli 的vue脚手架的话，那么使用使用node.js可以快速的创建出vue-cli的脚手架
而至于node.js，如果一定要说的话，就是，node.js有提供丰富的npm插件供你使用，如果你需要使用vue搭建cli 的vue脚手架的话，那么使用使用node.js可以快速的创建出vue-cli的脚手架。打包部署，解析vue单文件组件，解析每个vue模块，拼在一起，转码es6，less，等等
五、学习vue之前先学习es6部分常用的语法新特性
新建html测试页面，在js中测试
- 和传统函数的定义方式的变化
//传统的方法定义方式
function eat(food) {
console.debug(food)
}
eat("面包")
var eat2 = (food) => {console.debug(food)}
eat2("zzz")
var sayHi = name=>console.log(name+",say hi!")
sayHi("小花");
- 在对象中的定义方法
let person = {
"name":"小王",
//不能使用this.
"play":(name) => console.debug("玩"+name),
/*简写*/
sleep(){
console.debug("在睡觉")
}
}
person.play("篮球")
person.sleep()
简写方式，类似于Java中对象的方法
直接：
方法名（参数）{
方法体
}
- 解构函数
可以将数组或者对象等解构成单个变量，按顺序一一对应
//解构数组
var arr = ['小花',2,3,4]
//变量一一对应
const [a1,a2,a3,a4,a5] = arr;
console.debug(a1,a5)
解构对象，将对象中的属性解构为单个的变量
/*解构对象*/
var user = {"name":"小白",age:18}
//对象的属性名，结构成单独变量
const {name,age} = user;
console.debug(name)
- 解构函数加上对象方法
解构函数将对象解构后再以参数的形式传入
var run = ({name}) => {
console.debug(name+"在操场跑步")
}
run(person)
- Promise 异步ajax解决方案
Promise本身是一个容器,里面通过函数表示要执行内容，以后不会直接使用会用axios,axios的底层就是对Promise
var promiseTest = new Promise(function (resolve, reject) {
//发送异步请求，后台响应
//resolve相当于成功时返回的参数
//reject相当于失败后返回的参数
var num = Math.random();
if (num>0.5){
resolve("成功了就用我"+num)
}
else {
reject("失败了就使用我"+num)
}
})
//promise.then 表示异步调用Promise定义的要执行内容,把执行的返回值结果作为回调函数msg
promiseTest.then(
//成功后的回调函数，参数就是resolve返回的参数
function (massage) {
console.debug(massage)
//.catch失败后的回调，参数是 reject 返回的参数
}).catch(function (massage) {
console.debug(massage)
})
- var和let
for (var i = 0;i<10;i++){
console.debug(i+"test=======");
}
console.debug("test：：：");
console.debug(i);
//let是块级的变量
//m is not defined 只能在定义的区域使用
for (let m = 0;m<10;m++){
console.debug(m+"test=======");
}
console.debug("test：：：");
console.debug(m);
六、vue.js框架基础学习的准备
使用npm加载vue
新建测试的HTML页面，在js中学习vue
- vue是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 - 要使用vue需要在页面引入
<script src="../node_modules/vue/dist/vue.js"></script>
七、vue对象
- vue对象的认识
vue对象是在js中定义的一个对象，要使用，需要绑定一个页面的块级元素
- Vue实例挂载(el)的标签
<div id="app">
<h1>{{message}}</h1>
</div>
<div class="vueClz">
<h1>{{message}}</h1>
</div>
/*
使用构造函数创建一个vue对象：
这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
id挂载:el:"#id"
class挂载：el:".class"
*/
//id挂载方式：
var app = new Vue({
el : "#app",
data : {
message : "我是id挂载方式"
}
});
//class挂载方式：
var app2 = new Vue({
el : ".vueClz",
data : {
message : "我是class挂载方式"
}
});
- Vue中的数据(data)模型详解
Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问data对象中的数据,及时同步的页面上
<!--html模板-->
<div id="lr">
<h1 v-on:click="click">{{name}}</h1>
</div>
<!--在js中创建vue对象，
vae的写法
el绑定的标签
data是数据模型
methods：绑定的方法-->
<script type="text/javascript">
//创建vue的对象实例
new Vue({
el: "#lr", //el挂载元素,要把vue对象实例挂载到那个html块上面-id,class 和jquery选择器一样
data:{ //数据模型
//vue就是一个对象
// 操作数据模型里面数据,不需要通过data.来访问,直接访问里面属性
name:"小明."，
age:18
/*函数绑定，里面是定义的函数，在外面用名字调用*/
},methods:{
click(){
alert("我是"+this.name)
}
}
})
</script>
3、Vue中的方法(methods)详解
Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象
<!--v-model="msg":双向绑定数据-->
<!--v-on:click="dian"添加点击事件-->
<input id="lr" type="text" v-model="msg" v-on:change="dian"><button v-on:click="dian">点击测试</button>
<!--vue的js写法-->
<script type="text/javascript">
//创建vue
new Vue({
el:"#lr", //vue要挂靠到的是哪个标签
data:{ //数据模型
msg:"洗白"
},methods:{
dian(){
alert(this.msg)
}
}
})
</script>
- 钩子方法
created()创建后 执行
mounted()加载完成后执行 相当于加载完毕后执行onload $(fuction(){});
<!--html模板-->
<div id="lr">
{{test}}
</div>
<!--js代码-->
<script type="text/javascript">
new Vue({
el:"#lr",
data:{
test:''
},
//钩子方法
created(){ //创建后 赋值给test
this.test = "script创建vue后运行"
},
mounted(){//挂载完毕后赋值给test 相当于加载完毕后执行onload $(fuction(){});
this.test = "加载完成后执行"
}
})
//先运行js,加载完成再运行mounted
alert("我比mounted先执行")
</script>
八、vue的双向绑定
- vue的双向绑定，如果输入，就改变vue中的值，
改变js中data数据的值，挂载标签中的值也跟着改变
这是双向的
<div id="lrtest">
<!--绑定改变事件-->
<input type="text" v-model="name" v-on:change="test1" />
</div>
<script>
new Vue({
el:"#lrtest",
data:{
name:"小花"
/*函数绑定，里面是定义的函数，在外面用名字调用*/
},methods:{
test1(){
this.name="我改名字了。。小红"
}
}
})
</script>
九、vue的表达式和对象取值
<!--注意要绑定了vue的才可以使用vue的语法-->
<div id="lrtest">
<h1>{{3+2}}</h1>
<!--字符串拼接-->
<h1>{{5+"字符串"}}</h1>
<!-- 减法 -->
<h3>{{8-6}}</h3>
<!-- 乘 -->
<h3>{{2*4}}</h3>
<!-- 除-->
<h3>{{10/5}}</h3>
<h3>{{"10"/"5"}}</h3>
<!--表达式取值-->
<h1>{{massage}}</h1>
<!--表达式的一些方法测试-->
<!--字符串长度-->
<h1>{{massage.length}}</h1>
<!--截取字符串-->
<h1>{{massage.substring(2,5)}}</h1>
<!--三目运算-->
<h1>{{bool?"真":"假"}}</h1>
<!--对象操作-->
<!--转换为json格式输出-->
<h1>{{JSON.stringify(user)}}</h1>
<!--调用的是方法注意加上括号-->
<h1>{{user.toString()}}</h1>
如果是数组直接取值
<h1>{{user.like[2]}</h1>
</div>
<script>
var user={
name:"小明",
eat(){
return "吃东西"
},
toString(){
return "名字:"+this.name
},
like:["唱","跳","rap"]
}
new Vue({
el:"#lrtest",
data:{
massage:"我真的好想逃。。",
bool:true,
user:user
}
})
</script>
十、vue的指令之v-text,v-html
<标签名 v-text=“属性或方法名”></标签名>
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)
v-text指令中的数据嵌套标签原因输出
<div id="lr">
<span v-text="test1" ></span><br>
<span v-text="test2" ></span><br>
<span v-html="test3"></span><br>
<span v-html="test4"></span><br>
</div>
<script>
new Vue({
el:"#lr",
data:{
test1:"我是谁",
test2:"<h3>v-text指令中的标签原样输出</h3>",
test3:"嘤嘤嘤",
test4:"<h1>嗡嗡嗡</h1>"
}
})
</script>
十一、v-model 指令(重要)
语法:
<标签 v-model=“表达式”></标签>
在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变.
注意事项:
- 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
- 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中
- v-model只作用于部分表单
- 在选项框中如果data中的数据和input选项中的数据一致，就是选中状点击其他选项的时候，data中的数据会动态改变
<div id="lr">
<input type="text" v-model="name" value="data中的数据优先于value">vue中data的数据:::{{name}}<br>
<!--如果data中的数据和input选项中的数据一致，就是选中状态
点击其他选项的时候，data中的数据会动态改变
-->
<!-- 多选框的data是一个数组解构checkboxValue:["上网"],
-->
<h3>
打球<input type="checkbox" v-model="checkboxValue" value="打球">
上网<input type="checkbox" v-model="checkboxValue" value=""><br>
<!--动态双向改变-->
data::{{checkboxValue}}
</h3>
<h3>
<!--单选测试-->
英雄联盟<input type="radio" v-model="radioValue" value="打球">
dota2<input type="radio" v-model="radioValue" value="上网"><br>
data::{{radioValue}}
</h3>
<!--可拖拽文本域textarea测试-->
输入文字。。:<textarea v-model="textareaValue"></textarea><br/>
data中的值:{{textareaValue}}
<br/>
<hr>
<!--下拉列表-->
技能:<select v-model="likes">
<option value="唱">唱</option>
<option value="跳">跳</option>
<option value="rap">rap</option>
</select><br/>
data中改变的值:{{likes}}
</div>
<script>
new Vue({
el:"#lr",
data:{
name:"小花",
//当前input的默认值，如果和input中的value一样，就是选择状态
checkboxValue:["上网"],
radioValue:"",
textareaValue:"当前没有输入",
likes:""
}
})
</script>
十二、指令之if-else if -else 条件判断语句
<!--v-if-else-if测试。。。-->
<div id="lr">
<h3 v-if="high<170">有点矮</h3>
<h3 v-else>正常水平</h3>
<!-- 相当于Java中的if-else if -else 条件判断语句-->
<h3 v-if="age<18">青少年</h3>
<h3 v-else-if="18<=age&&age<=30">青年</h3>
<h3 v-else>老年</h3>
</div>
<!--绑定vue-->
<script>
new Vue({
el: "#lr",
data: {
high: 170,
age: 18
}
})
</script>
十三、vue-cli学习
在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
使用它能快速的构建一个web工程模板。
官网：https://github.com/vuejs/vue-cli
安装命令：npm install -g vue-cli
- 新建模块
- 进入当前模块项目下
初始化项目
vue init webpack
注意有三个选择no
- 初始化完毕运行npm run dev
- 帮助说明文件
打包功能命令
- 测试打包 npm run build 打包后只能在服务器上运行
假如要发布项目了，将dist下面打包的文件发布到服务器
打开tomcat的配置文件，将之前发布的项目取消
用tomcat做测试
找到tomcat的文件夹，只需要ROOT文件夹
将打包文件放进来，tomcat默认运行的文件夹
然后来到bin目录
输入cmd，打开
然后运行tomcat
输入tomcat的端口访问
cli就搭建完成
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
