学习笔记之vue

vue学习笔记

一、模板语法和指令；
{{ }}
v-if=‘判定’
v-if-else=‘判定’
v-else
v-show，是否显示
v-for="(item,index) in items"，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
v-bind，属性绑定
v-model ，表单双向绑定：
v-model.lazy=“msg”，lazy 修饰符，转变为使用 change 事件进行同步；
v-model.number=“age”，number 修饰符，自动将用户的输入值转为数值类型；
v-model.trim=“msg”，trim 修饰符，自动过滤用户输入的首尾空白字符
v-on(@),事件绑定

二、父子组件传值；
1.父传子，通过自定义属性传值，可传固定值也可v-bind绑定，例：<子组件 :title=“data” />。
2.子传父，无法直接传值，可子组件自定义事件（this.$emit(‘事件名’,‘传递的值’））,父组件监听子组件的自定义事件（@事件名=“父组件方法”）获取值（在父组件方法的参数中获取值）。

三、vuex
1.创建store.js文件；

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
		
  },
  mutations: {
		
  },
  actions: {
		
  },
});

2.在项目入口文件引用store.js文件；

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store'; //引入store.js

new Vue({
  router,
  store, //全局引用
  render: h => h(App),
}).$mount('#app');

3.使用vuex；
在store文件中创建变量，在组件中可以使用模板语法显示数据{{this.$store.state.count}}；

export default new Vuex.Store({
  state: {
		count: 1,
  },
  mutations: {
		changecount(state,data){
			state.accen += data.data;
		}
  },//只可在mutations中改变state中变量的值，mutations为同步执行；
  actions: {
		changecount(context,data){
			context.commit('changecount',data);//commit方法触发mutations中的方法，data为更改参数；
		}
  },//actions中为异步执行，一般在actions中提交mutation再去修改状态值；
});

在组件中触发actions中的方法；

change(){
	var data={data:666};
	this.$store.dispatch('changecount',data);
}

使用组件methods初始化钩子函数获取值；

mounted(){
	var d = this.$store.state.count;	
},

四、router
1.创建router.js文件；

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
	{
	  path: '/accgroup',
	  name: 'accgroup',
	  // route level code-splitting
	  // this generates a separate chunk (about.[hash].js) for this route
	  // which is lazy-loaded when the route is visited.
	  component: () => import(/* webpackChunkName: "about" */ './views/AccGroup.vue'),			
	}//懒加载
]		

2.在项目入口文件引用router.js文件；

import Vue from 'vue';
import App from './App.vue';
import router from './router'; //引入router.js
import store from './store';

new Vue({
  router, //全局引用
  store,
  render: h => h(App),
}).$mount('#app');

3.使用router；
在根组件中使用<router-view>标签创建路由容器，

<template>
  <div id="app">
    <Nav />
    <router-view/>//路由路径绑定的组件在此显示
  </div>
</template>

在导航或其他组件中使用<router-link to="/"></router-link>标签跳转路由

<router-link to="/"><p>路由跳转</p></router-link>

zjs中跳转页面

this.$router.replace('/')
this.$router.go(-1) //跳转到上一页面

五、赋值
JSON.parse()方法将数据转换为 JavaScript 对象
JSON.stringify() 方法将 JavaScript 对象转换为字符串
在使用vue data变量赋值时，常常改变一个变量后，两个变量同时变化；解决方法用 JSON.parse(JSON.stringify(this.data))赋值；例：

data: () => ({
	i: {sum: 111},
}),
methods: {
	a(){
		var b = this.i;
		b.sum = 0;
		console.log(this.i.sum)/输出/0
	},
	b(){
		var b = JSON.parse(JSON.stringify(this.i));
		b.sum = 0;
		console.log(this.i.sum)/输出/111
	},
},

六、 vue-cli-build打包工具（v-3.0及以后版本）

1.打包配置；
①在更目录下创建vue.config.js文件；
②输入配置内容；
③如路由中使用mode: 'history',模式，则打包后引入的图片资源http请求路径报错(路径为http://localhost:8080/img/xx.png)，暂时将mode: 'history',模式注释掉。(后续查找资料中…)

module.exports = {
 // 基本路径,如网页放在服务器跟目录，路径为'/';如需放入文件夹中，路径则为‘./’,也可设置为绝对路径'/url/’
 publicPath: './', 
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader 配置项
 // https://vue-loader.vuejs.org/en/options.html
 vueLoader: {},
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,
 // css相关配置
 css: {
  // 是否使用css分离插件 ExtractTextPlugin
  extract: true,
  // 开启 CSS source maps?
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {},
  // 启用 CSS modules for all css / pre-processor files.
  modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否启用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll: false,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相关配置
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null, // 设置代理
  before: app => {}
 }
}