文档

铺垫

以前网页制作web1.0 如今是web2.0-->交互式操作
前端工具
grunt
gulp
webpack :打包机 作用:将项目中的js,css,img,font,html等进行捆绑 编译成一个.js文件进行加载

请求

//  img src , css href , audio src a href 都是对服务器发起一次请求

并行操作 ---> 异步

amd 和 cmd 模板化 异步模块定义 ---自己百度

什么是node.js

一种后端语言

# Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
# Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
# Node.js 的包管理器 npm,是全球最大的开源库生态系统。
#   nodejs:Node。js的包管理器npm,一门后端语言,写服务器代码
# npm:好比Python中的pip,node package
# manage, 开源的,供所有的前端开发者使用的包都在这里面
# babel : 将我们的es6的代码在各种浏览器兼容(工具。)

包下网站

流程

自动生成json文件

1:初始化 npm init --yes

下载包 必须加--save(项目依赖 如bootstrap 渲染页面)

2:下载jQuery npm jquery --save

Vue组件

组件 (Component) 是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。
在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) .
并提供相同的生命周期钩子 # 组件:功能 架构 样式 组合的一个文件 .vue

需知

关于webpack模板
# entry 入口文件的地址
# output 出口
# loader babel-base-loader, vue-loader, css-loadeer, style-loader
# babel-base-loader 解析我们文件中的es6代码
# vue-loader 将文件编辑成.vue文件,供浏览器去识别(浏览器识别不了vue文件)
# css-loadeer 解析css代码
# style-loader 引入css的style # plugins 插件--> 就是一个js功能
# 例如js压缩(丑陋化) css压缩 html压缩 图片压缩 等等 # 模块---》 一个js文件就是一个模块

使用vue-cli

1:先下载

# 全局安装 vue-cli
npm install --global vue-cli # mac
在前面加sudo
在输入密码,输入开机密码即可
vue help
可以查看所有命令

vue init simple 第一个模板

第二个模板 webpack-simple

2:进入该目录 cd 02demo

3:下载项目里所有的依赖

方式一:

方式二:利用淘宝镜像下载

用 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后在cnpm instal

检查

查看node是否按转
node -v 查看vue
vue --version
成功的话会显示版本

启动

npm run dev

文件大概

1、main.js是我们的入口文件,主要作用是初始化vue实例,并使用我们需要的插件

2、App.vue是我们的跟组件,所有页面都是在App.vue下面进行切换的,可以理解为所有的组件都是App.vue的子组件

3、index.html文件入口

4、src放置组件和入口文件

5、node_modules为依赖的模块

6、config中配置了路径端口值等

7、build中配置了webpack的基本配置、开发环境配置、生产环境配置等

注意:

1:app.vue需要写三个固定标签
<!-- 组件都是.vue的文件 -->
<!-- 固定三标签 -->
<!-- 写页面结构 -->
<template>
</template>
<!-- 业务逻辑 -->
<script>
</script>
<!-- 样式 -->
<style></style> 2: 所有组件里面的标签必须是闭合标 3:script必须有的内容
script>
  // 抛出
  export default{
    name:"App",
    // 数据属性是一个对象单体函数
    data(){
      return {
        // 放当前组件的所有数据属性 key-val
        msg:'学习使我快乐',
        favs:['python','java','vue']
      },
      // 方法声明
      methods:{       },
      // 计算属性
      computed:{       },
      // 组件关系
      components:{       }
    }
  }
</script> 4 以后再项目中 凡是看到带有index或者main开头的文件,一般情况下都是我们项目的入口文件 // 模块  第三方的模块 只能引入名字 有import 就有export(抛出

组件通信

父子组件建立通信

vue的核心思想:数据驱动视图,双向数据绑定

父子组件通信:单向数据流

父子组件关联:需要在App.vue(父主件),里写个components对象

1:先创建子组件,然后在父组件里导入

  // 1:导入子组件模块
import Vheader from './Vheader'

2:挂载

      // 组件关系 父组件关联子主件
components:{
// 2: 将Vheader组件与父组件关联起来
// Vheader:Vheader 当名字一样时,可以直接写Vheader
// 只有这里写了,上面才能自定义标签
Vheader
}

3:使用

    <!-- 3 插入Vheader的图片 自定义标签 -->
<Vheader></Vheader>
<!-- 组件都是.vue的文件 -->
<!-- 固定三标签 --> <!-- 写页面结构 -->
<template>
<!-- HTML -->
<div id = 'app'>
<h3>{{ msg }}</h3>
<ul>
<li v-for = '(item,index) in favs'>
{{ item }}
</li>
</ul> <!-- 3 插入Vheader的图片 自定义标签 -->
<Vheader></Vheader>
</div> </template> <!-- 业务逻辑 -->
<script>
// JS
// 1:导入子主件模块
import Vheader from './Vheader'
// 抛出
export default {
name:"App",
// 数据属性是一个对象单体函数
data(){
return {
// 放当前组件的所有数据属性 key-val
msg:'学习使我快乐',
favs:['python','java','vue']
},
// 方法声明
methods:{ },
// 计算属性
computed:{ },
// 组件关系 父主件关联子主件
components:{
// 2: 将Vheader主件与父主件关联起来
// Vheader:Vheader 当名字一样时,可以直接写Vheader
// 只有这里写了,上面才能自定义标签
Vheader
}
}
}
</script> <!-- 样式 -->
<style>
/* CSS */
</style>

App.vue

<!-- 固定三样式 -->
<template>
<div class="vheader">
<img src="./assets/logo.png">
</div>
</template> <script>
// 对应app.vue的import
export default{
name:'vheader',
data(){
return{ }
}
}
</script> <style></style>

Vheader。vue(子组件)

建立webpack-simple模板

流程:
1: 下载全局vue cli
npm install --global vue-cli 声明vue项目
showdemo为项目名
cmd :vue init webpack-simple showdemo
在提示里会出现Use sass?
在Windows需要选择no ,不然需要下载sass
在Mac自带sass 模板建立完毕
cd 当前目录
2:下载项目依赖
npm install
3:启动
npm run dev

制作mark编辑器

项目依赖 加--save
npm install mark --save

要解析成mark语法

v-html

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

<div class="box" v-html='currentMarked' ></div>

问题:当图片导入不进来

可以将本地资源以模块的形式导入进来.
import url from './assets/logo.png'
<!-- 固定三样式 -->
<template>
<div class="Vheader">
<h3>啦啦啦</h3>
<!-- 需要绑定起来,才能链接到下面的属性 -->
<img src="./assets/logo.png">
</div>
</template> <script>
import url from './assets/logo.png'
// 对应app.vue的import
export default{
name:'vheader',
data(){
return{
url:url
}
}
}
</script> <style scoped>
h3{
color: blue;
}
</style>

父子组件传数据

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发出警告。这对于开发给他人使用的组件非常有用。

      设计模式:MVVM
父传子: 使用props,必须要验证
子传父:先得自定义事件,使用this.$emit()触发这个自定义事件
    同级组件之间的传值 vue-router vue
流程;
1:在父组件绑定子组件的标签
<Vheader :hfavs = 'favs'></Vheader>
2:在子组件需要验证 -->props
props:{
// 父组件传数据到子组件 一定要验证数据属性的类型
hfavs:Array
}
3:显示数据
<ul>
<li v-for = "(item,index) in hfavs">
{{item}}
</li>
</ul>

子主件往父组件传值

 子传父:先得自定义事件,使用this.$emit()触发这个自定义事件
<!-- 固定三样式 -->
<template>
<div class="Vheader">
<h3>啦啦啦</h3>
<!-- 需要绑定起来,才能链接到下面的属性 -->
<img src="./assets/logo.png">
<!-- 3 显示数据 -->
<ul>
<li v-for = "(item,index) in hfavs">
{{item}}
</li>
</ul> <!-- I子组件往父组件传值 -->
<button @click = 'addOneFav'> 添加 </button>
</div> </template> <script>
import url from './assets/logo.png'
// 对应app.vue的import
export default{
name:'vheader',
data(){
return{
url:url
}
},
// 2 验证
props:{
// 父组件传数据到子组件 一定要验证数据属性的类型
hfavs:Array
},
methods:{
// II 声明事件
addOneFav(){
// $emit 使用$emit() 方法来触发自定义事件
// 第一个参数 是自定义的函数名 触发到主件的函数
this.$emit('addHandler',11111);
}
}
}
</script> <style scoped>
h3{
color: blue;
}
</style>

Vheader。vue子

<!-- 组件都是.vue的文件 -->
<!-- 固定三标签 --> <!-- 写页面结构 -->
<template>
<!-- HTML -->
<div id = 'app'>
<h3>{{ msg }}</h3>
<!-- <ul>
<li v-for = '(item,index) in favs'>
{{ item }}
</li>
</ul> -->
<!-- 3 插入子组件 Vheader的图片 自定义标签 -->
<!--1 如何从父组件传递数据到子组件 使用vue提供的props I 子组件往父组件传值,使用自定义事件,使用$emit() 触发自定义函数
-->
<!-- 1 绑定 -->
<Vheader :hfavs = 'getAllDatas' @addHandler='add'></Vheader>
<Vmarked></Vmarked> </div> </template> <!-- 业务逻辑 -->
<script>
// JS
// 1:导入子主件模块 import Vheader from './Vheader'
import Vmarked from './Vmarked'
// 抛出
export default {
name:"App",
// 数据属性是一个对象单体函数
data(){
return {
// 放当前组件的所有数据属性 key-val
msg:'学习使我快乐',
favs:['python','java','vue'] }
},
// 方法声明
methods:{
add(a){
// alert("11")
this.favs.push(a)
}
},
// 计算属性
computed:{
getAllDatas(){
return this.favs
}
},
// 组件关系 父主件关联子主件挂载子组件 把子组件挂载到父组件中
components:{
// 2: 将Vheader主件与父主件关联起来
// Vheader:Vheader 当名字一样时,可以直接写Vheader
// 只有这里写了,上面才能自定义标签
Vheader:Vheader,
Vmarked
} }
</script> <!-- 样式 scoped单独加样式 -->
<style scoped>
/* CSS */
h3{
color: red;
}
</style>

app.vue主

 
 

vue 之node.js 02的更多相关文章

  1. socket应用(vue、node.js、M站)

    socket应用(vue.node.js.M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...

  2. Vue:node.js与vue安装配置

    下载node.js 官网: https://nodejs.org/zh-cn/ 查看node版本 node -v 配置淘宝NPM镜像源(下载速度快) npm install -g cnpm --reg ...

  3. vue之node.js的简单介绍

    一.什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二.安装 1.node.js的特性: - 非阻塞IO模型 - ...

  4. [Node.js] 02 - Read Eval Print Loop

    视频课程:带你入门Nodejs,提及了非常多的后端知识点 发布时间: 2017年10月7日 课程时长:193 分钟 类别:后端 课时:22 npm Resource: npm模块管理器[阮一峰] np ...

  5. vue学习【第三篇】:vue之node.js的简单介绍

    什么是node.js 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 安装node.js node.js的特性 - 非阻塞IO模型 - 时 ...

  6. vue之 node.js 的简单介绍

    一.什么是 node.js? 它是可以运行在JavaScript的服务平台 二.安装 1.node.js的特性 - 非阻塞IO模型 - 时间驱动 2.运用场景 - 高并发低业务 - 实时场景 - 聊天 ...

  7. Vue和Node.js交互之token

    博主最近工作的时候,公司后台使用的JAVA,在做登陆时总会传来一个token然后我存在了本地存储中或Vuex中,之后每一次请求把它带在请求头上,然后就好奇想要自己做一个后台服务器然后做一个完整的登陆的 ...

  8. Hexo准备---Node.js、Vue

    Hexo准备---Node.js.Vue 安装node.js 1.下载node 配置node.js环境官网下载,一直next就好,非常方便. 下载官网: http://nodejs.cn/downlo ...

  9. Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

随机推荐

  1. 洛谷 P2015 二叉苹果树(codevs5565) 树形dp入门

    dp这一方面的题我都不是很会,所以来练(xue)习(xi),大概把这题弄懂了. 树形dp就是在原本线性上dp改成了在 '树' 这个数据结构上dp. 一般来说,树形dp利用dfs在回溯时进行更新,使用儿 ...

  2. POJ2739解题报告

    2017-09-01 17:04:45 writer:pprp 一开始读错题了,总是想不到,其实不是很难,但是就是心理太着急了,反而浪费了很长时间 /* @param:poj2739 @writer: ...

  3. SonarQube介绍及部署

    SonarQube介绍及部署 编写人:罗旭成 编写时间:2014-5-28 SonarQube简介 SonarQube是一个用于代码质量管理的开源平台(Java开发),用于管理源代码的质量,可以从七个 ...

  4. 做文件上传下载时报这个错com.alibaba.fastjson.JSONException: illegal identifier : \

    ::-exec-] DEBUG c.i.e.m.I.insertDataEmebeding - <== Updates: ::-exec-] ERROR c.i.e.c.CaseArchiveC ...

  5. ElasticSearch + Canal 开发千万级的实时搜索系统【转】

    公司是做社交相关产品的,社交类产品对搜索功能需求要求就比较高,需要根据用户城市.用户ID昵称等进行搜索. 项目原先的搜索接口采用SQL查询的方式实现,数据库表采用了按城市分表的方式.但随着业务的发展, ...

  6. iPhone 和Android应用,特殊的链接:打电话,短信,email

    下面的这篇文章主要是说,网页中的链接如何写,可以激活电话的功能. 例如,页面中展示的是一个电话号码,当用户在手机浏览器里面点击这个电话号码的时候,手机会弹出拨号的面板,或者是短信程序会启动等. 1. ...

  7. C# 获取命名空间对应的程序集位置

    由于同名命名空间会被多个程序集使用,C#没有提供直接的方法(对象浏览器也不行)通过命名空间获得程序集位置,这样就不方便找到那些引用文件时什么. 那么可以在立即窗口,中断某个代码的时候,去查询类所在程序 ...

  8. UVALive-4287 Proving Equivalences (有向图的强连通分量)

    题目大意:有n个命题,已知其中的m个推导,要证明n个命题全部等价(等价具有传递性),最少还需要做出几次推导. 题目分析:由已知的推导可以建一张无向图,则问题变成了最少需要增加几条边能使图变成强连通图. ...

  9. Date类型

    1.创建日期对象 var now = new Date(); var someDate = new Date(Date.parse("May 25, 2004")); var so ...

  10. .pth 文件扩展python环境路径

    有时候我们不希望把一个库放到 site-packages 下面,而是更愿意把它保留在原始的工程目录中,方便管理和维护. 通常的做法是在程序启动的时候,往sys.path里面增加这个目录,但是这样做非常 ...