vue与nodejs

一. 开发工具

​ 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/[email protected]/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中提出的，可以提高页面的复用率，提高开发效率，便于团队协作，是一套模板化的代码，要有