vue与nodejs
vue框架的基本概念
- 一. 开发工具
- 二. 第一个VUE程序
- 2.1 引入js
- 2.2 给dom元素定义id
- 2.3 vue代码编写
- 三. 基本指令
- 四. 计算属性
- 五，事件相关
- 六. 过滤器
- 6.1 全局过滤器
- 6.2 局部过滤器
- 七. vue-cli构建项目与打包部署
- 7.1 使用npm构建项目
- 7.2 项目的结构介绍
- 7.3 项目的打包部署
- 7.4 常用的安装命令
- 八. 组件化开发
- 8.1 编写App.vue和HelloWorld.vue
- 8.2 定义入口JS文件
- 九， 组件间的通信
- 9.1 子父组件向父组件传参
- 9.2 父组件向子组件传参
- 9.3 插槽的使用
- 十. VueRouter
- 10.1安装
- 10.2 使用路由器的过程
- 10.3. 路由之间的传参
一. 开发工具
VUE开发环境推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下：
- Vetur —— 语法高亮、智能感知、Emmet等
- EsLint—— 语法纠错
- Auto Close Tag —— 自动闭合HTML/XML标签
- Auto Rename Tag —— 自动完成另一侧标签的同步修改
- Path Intellisense —— 自动路劲补全
- HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
- Vue 2 Snippets ——vue的语法提示
- Vue 3 Snippets ——vue的语法提示
二. 第一个VUE程序
2.1 引入js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
2.2 给dom元素定义id
<div id="app">{{msg}}
</div>
2.3 vue代码编写
new Vue({el: "#app",data() {return {msg: "Hello World"}}
});
三. 基本指令
v-text: v-text是用于操作纯文本，它会替代显示对应的数据对象上的值，可以简写为{{}}, 即插值表达式。
v-html: 将内容以html的形式呈现在页面。
v-model: 双向数据绑定。
v-if: 值如果为true的情况下，显示标签，如果为false会移除标签。
v-else-if: 与v-if配合使用。
v-else: 与v-if配合使用。
v-show: 如果为true,显示信息，如果为false则隐藏标签。
v-for: 循环遍历。语法形式为 v-for=“item in list”
v-bind: 将值绑定到标签的自定义属性上，形式为 v-bind:title=“mytitle”，可以简写为 :属性名
v-on:click: 点击事件，可以简写为@click。
四. 计算属性
计算属性是用来存储数据，而且数据可以进行逻辑操作，是基于其依赖的进行更新，只有在相关依赖发生变化的时候才会更新变化，计算属性是缓存的，只要相关依赖不发生变化，多次访问属性值是之前I计算得到的值，并不会多次执行。计算属性的属性名不需要纳入到Vue的数据对象中。
computed: {change() {//通过原有变量改变计算属性的值get() {return },//通过传入属性改变原有变量set(res) {}}}
五，事件相关
1. @click.stop='方法名' 阻止事件冒泡
2. @click.prevent='方法名' 阻止时间的默认行为
3. v-model.trim='属性名' 表单提交时去掉前后空格
4. v-model.number='属性名' 表单输入为number类型
5. @keyup.enter='方法名' 或者 @keyup.13='方法名' 按回车键后会触发某个方法
六. 过滤器
Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式，他不能替代Vue中的methods、computed或者watch，因为过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。不过，在Vue 2.0中已经没有内置的过滤器了，我们必须要自己来构建它们。过滤器只能用于插值表达式中。
6.1 全局过滤器
全局过滤器是只通过 Vue.filter()的方式来定义的过滤器，用这种方式定义的过滤器可以被所有的Vue实例使用。
案例一：将数字转换为美元的形式。
<div id="app"><p>{{price | toUSD}}</p>
</div>
<script src="./vue.js"></script>
<script>Vue.filter('toUSD', function(value){return '$' + value;})new Vue({el: '#app',data: {price: 345.45}});
</script>
案例二：串联过滤器，将数字四舍五入成两位有效数字，然后转换为美元表达方式
<div id="app"><p>{{price | fix(2) | toUSD}}</p>
</div>
<script src="./vue.js"></script>
<script>//方法的第一个参数为数据源，第二个为保留几位小数。Vue.filter('fix', (num, limit) => {return num.toFixed(limit);});//转换为美元表达方式Vue.filter('toUSD', function(value){return '$' + value;})new Vue({el: '#app',data: {price: 345.45}});
</script>
6.2 局部过滤器
局部过滤器是定义在Vue实例中，只能在指定的实例中才能使用。
案例：我们创建博客的时候，都会有文章列表，每篇博客将会有一个文章摘要，然后提供一个“”的功能。我们这个示例就是来创建一个名为readMore的过滤器，它将把字符串的长度限制为给定的字符数，并将其附加到你的选择的后缀中。
<div id="app"><p>{{article | articleDisplay(20, '...')}}</p>
</div>
<script src="./vue.js"></script>
<script>new Vue({el: '#app',data: {article: '17日，复旦大学国际政治系副教授沈逸在接受观察者网采访时，将15日启动立法' + '程序阻挠政府解禁华为的议员称为“杠精”和“戏精”，称其是为了在贸易问题上，' + '加大国会在白宫面前的存在感，是美国政治的一种内斗形式，但最终，破坏的还是' + '美国企业的利益。'},filters: {// value为数据源，length表示要展示的长度，suffix为后缀articleDisplay(value, length, suffix) {return value.substring(0, length) + suffix;}}
})
</script>
七. vue-cli构建项目与打包部署
使用vue-cli能够快速的帮助我们构建项目，它就如同一个脚手架，提供了可选的模板。在使用vue-cli之前需要先安装nodejs。
7.1 使用npm构建项目
node -v #查看node版本
npm -v #查看npm是否成功
npm install -g @vue/cli #安装vue-cli,该步骤需要等一段时间
vue -V #查看vue-cli的版本
vue create my-app #创建名为my-app的项目
vue install #生成node_modules文件夹
7.2 项目的结构介绍
- public: 存放静态文件。
- src: 源码文件，开发就在此目录下。
- .gitignore: git的配置文件。
- babel.config.js: babel的配置文件，在创建项目的时候才用的脚手架为bable。
- package-lock.json：定义了依赖库的下载位置，保证了在项目迁移部署环境的一致性。
- package.json: 定义了该项目依赖的类库。
7.3 项目的打包部署
执行命令：
npm run build
将生成的dist目录下的文件放入到tomcat或者nginx下，启动服务器，即可访问。
7.4 常用的安装命令
1. npm i element-ui #安装element ui 框架
2. npm i ant-design-vue #安装ant-design-vue 框架
3. npm i axios #安装axios
4. npm i vue-router #安装路由
5. npm config set registry https://registry.npm.taobao.org #配置淘宝镜像
6. npm config get registry #查看下载镜像
7. npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
8. npm i node-sass # 这两步都是安装sass
在package.json中这样写
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import Antd from 'ant-design-vue';
import 'element-ui/lib/theme-chalk/index.css'
import 'ant-design-vue/dist/antd.css';Vue.filter('imgFilter', val => {return val.replace('/w.h', '')
})// 如果引入的是 安装某个组件，不用写路径，如果是自己定义的组件必须要写路径 @/ ./
import router from '@/router'Vue.use(ElementUI)
Vue.use(Antd)new Vue({router,render: h => h(App),
}).$mount('#app')八. 组件化开发
组件化开发是在ES6中提出的，可以提高页面的复用率，提高开发效率，便于团队协作，是一套模板化的代码，要有<template>、<script>、<style>三个标签，分别用来定义布局、脚本和样式。而且<template>下必须有一个根节点。
8.1 编写App.vue和HelloWorld.vue
HelloWorld.vue
<template> <div> <!-- template的根节点，是必须的 --><h1 class="title">{{msg}}</h1></div>
</template>
<script>export default { <!-- 向外保留成员，表示向外暴露该组件 -->data() {return {msg: 'Hello World'}} },<!-- 页面初始化要执行的操作 -->mounted() {},<!-- vue中自定义的方法 -->methods: {},</script>
<style>.title{color: red;}
</style>
App.vue
<template><div><p>{{article}}</p><Helloworld></Helloworld> <!-- 在Helloworld.vue中的组件 --></div>
</template>
<script>
/*** 引入HelloWorld.vue组件，使用Helloworld变量来接收，接收变量的组件* 可以叫任何名字，但是推荐使用和导入组件保持一致。*/
import Helloworld from './components/HelloWorld.vue'export default {/*** 需要在当前组件中来定义引入的组件，接收的形式可以有二种：* * components: {HelloWorld} 最原始的写法为{Helloworld:Helloworld},第一个Helloworld* 在当前组件中使用的名字，可以随意更改，第二个Helloworld是上面import引入的时候用来接收的变* 量名。如果只写一个表示当前组件中使用的名字和变量名一致。 */components: {Helloworld},data(){ //组件化编程必须使用定义data方法return {article: '路透社20日援引伊朗法尔斯通讯社消息称'};}
}
</script>
<style>
</style>
8.2 定义入口JS文件
import Vue from 'vue' //引入vue
import App from './App.vue' //引入自己定义的App.vue,使用变量App来接收new Vue({render: h => h(App), //将App组件渲染到index.html中。
}).$mount("#app")
九， 组件间的通信
9.1 子父组件向父组件传参
在一个组件中绑定了一个自定义事件，
addCmt是在父组件中自己定义的方法，
而@addComent需要在子组件中去通过this.$emit('addComment')来调用
1. <publish-comment @addComment="addCmt"></publish-comment>
在子组件中调用父组件的事件的时候可以传参
2. this.$emit('addComment', this.username, this.content)
在父组件中直接使用此事件方法
3. addCmt(username, content) {}
9.2 父组件向子组件传参
自定义属性cmts，表示将comments赋值给此属性
1. <comment-list :cmts="comments" @delCmt="deleteComment"></comment-list>
在data中定义个一个变量
2. data() {return {comments: []}},
在子组件中通过来获取父组件中comments的值，使用方法就跟自己定义的属性一样，前面加上this
3. props: ['cmts'],
9.3 插槽的使用
一. 具名方式的插槽
子组件中
1. <slot name="title"></slot>
父组件中
2. <button slot="title">这是一个按钮</button>二. 匿名方式的插槽
子组件中
1. <slot />
父组件中
2. 可以只用文字
十. VueRouter
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
10.1安装
npm install vue-router --save
10.2 使用路由器的过程
1. 创建views文件夹，用来装通过路由器筛选的vue
2. 编写views中的vue文件（如果要建立二级路由需要命名一个vue文件名的文件夹）
3. 新建router文件夹，在此文件夹中创建index.js文件
4. 在此文件中配置如下信息（举例）
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Goods from '@/views/Goods.vue'
import MyPage from '@/views/MyPage.vue'
import ShowInfo from '@/views/Home/ShowInfo.vue'
import ShowLogin from '../views/Home/ShowLogin.vue'Vue.use(Router)const router = new Router({linkActiveClass: 'active',mode: 'hash',routes: [{path: '/home',component: Home,children: [{path: '/home/showlogin',component: ShowLogin},{path: '/home/showinfo',component: ShowInfo}]},{path: '/goods',component: Goods},{path: '/mypage',component: MyPage},{//默认进入home页面path: '/',redirect: '/home'},{//随意输入的时候也是进入home界面path: '*',redirect: '/home'},]
})export default router5. 在src目录中去配置main.js文件（举例）
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';import router from '@/router'Vue.use(ElementUI);new Vue({el: '#app',router,render: h => h(App)
});6. 在之前需要通过页面跳转的地方写入<router-link>如
<router-link to="/home">首页</router-link>
7. 准备一个路由器筛选出来的vue放置的位置
<router-view></router-view>10.3. 路由之间的传参
方法一：
1. 通过其中一个路由绑定的方法
handleClick(scope.row.id) 获得id
2. 在methods中的上述方法通过以下方式传参
handleClick(id){this.$router.push(`/detail/${id}`)
}
3. 在配置中path: '/detail/:id',component: Detail,props: true4. 在被传递的路由绑定的vue中
props: ['id']
方法二
1. 实现跳转赋值
this.$router.push({path: '/user',query: {id:id}
});
2. 取值
mounted() {this.id = this.$route.query.id;
},
vue与nodejs相关推荐
- vue 和nodejs是什么关系？
vue和nodejs经常让新手们感到困惑,它们之前到底啥关系呀,学习曲线又是什么呢?下面我来总结一下他们之间的关系方便以后的学习规划. 我们对比vue和nodejs之间的关系,首先用几句话描述一下它们 ...
- 基于Vue和NodeJs摄影网站的设计与实现
随着互联网技术和信息化技术的不断深入发展,利用互联网技术进行信息化管理有了很大的提高,从而使得信息管理变的越来越快捷.面对互联网的发展提升引发的新的办公方式,照相馆管理人员急需要一套摄影网站管理系统来 ...
- Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
- vue.js+nodejs游戏道具商城管理系统java python php
账户登录:管理员账户与普通玩家账户 管理员账户:能完全管理全部普通玩家账户.自定义道具的种类和信息等 增删改查:道具的获得.使用(丢弃)等等. 游戏选择:不同游戏不同道具 ①用户登录界面 ②账户登录后 ...
- vue+axios+nodejs+multer上传文件的坑
在做前后端分离的项目时.我们就不能使用form表单来提交数据或者上传文件了,那么就只能通过vue的axios来提交数据,如果数据中有文件类型的数据,就需要将所有需要上传的数据添加到FormData对象 ...
- 17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面
这期开始主页面的编写,在src\views目录下创建主页面Home.vue,主要是管理系统页面布局,头部和左侧导航栏. 一.Home.vue 页面 1.1 Home.vue 页面html部分: < ...
- vue 回车查询 按钮_前后端分离商城，前端基于Vue后端nodejs包含小程序源码免费分享...
先转发,然后加关注,私信"购物"即可获取源码下载链接 项目简介 本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现 ...
- vue+websocket+nodejs实现聊天室 - 消息已读未读
前言 上一篇讲了聊天室增加一对一单聊,这次讲如何新增已读未读状态. 大概思路: 服务器返回消息列表,增加参数status为1,单聊和群聊通过过滤状态区分对应未读数量,当前聊天,直接在currentMe ...
- idea工具整合前端vue，nodeJs步骤
一: 下载nodeJs并安装 http://nodejs.cn/download/ 安装npm依赖 最后启动项目
最新文章
- 基于linux的驱动设计,《基于LINUX的虚拟驱动设计》-毕业论文.doc
- Python 编写一个有道翻译的 workflow 教程
- harmonyos 2.0怎么升级,HarmonyOS 2.0正式发布 分布式能力获得全面升级
- python 如何匹配列表中某个单词_Python如何匹配文本文件中多行中的特定单词/数字，并将它们存储在单独的列表中...
- python 检查文件是否存在_Python中如何判断文件是否存在？
- 怎么修改腾讯视频的昵称
- 网传梅姨照片竟然是电脑合成的！仅需 100 行代码，你也能做到！
- EasyPoi 的样式使用及其自定义
- JEECG V3版本组合查询实现方法
- CloudIDE插件开发实战：教你如何调试代码
- 关于精英版stm32从模板工程移植RTT Spi驱动打开后编译不过的处理办法
- python qt listview如何显示图片_python如何导入图片
- About scrum reports
- 运放输入偏置电流方向_运放-输入偏置电流与输入失调电流
- fatal: 无法创建 '/xxx/xxx/xxx/xxx/.git/index.lock'：文件已存在。似乎另外一个 git 进程在这个仓库中运行，例如：'git commit' 命令打开了一个编辑
- blink usb无线网卡驱动 linux,blink随身wifi驱动
- 选票统计 SDUT
- Informix数据库查询表的锁级别
- 局域网内，两台电脑时间同步
- 远程链接linux桌面的软件,远程linux桌面软件