vuex用来实现页面切换
2018-10-18 19:30:21 ystandri 阅读数 3689

import Vue from 'vue'

import Vue form 'vue’的意思

  1. import Vue form ‘vue’ 写全的话是import Vue from ‘…/nodemouls/vue/list/vue.js’; 此时在webpack.base.conf.js中进行了定义,内置了一些选项,extenions:[’.js’,’.vue’,’.json’],意思是省略后面的后缀,由webpack来自动为我们加上。
  2. 如果名字比较长,还可以起个别名。
    alias:{ ‘@’:resolve(‘src’)},
    它的意思是在vue项目中,引入路径的时候使用@即代表src文件夹,省去了…/…/…/的操作,这样写比较十分方便。
  3. 当我们在模板中写img的时候有时也需要翻着找,那么能用@代替吗?答案是当然可以的,
    比如在assets文件夹中有张图片,logo.png。以往写可能是:
<img src="../../src/assets/logo.png">

现在知道怎么回事以后可以直接这样写:

<img src="@/assets/logo.png"
  1. 试验发现这是能成功的,但是lssue提出的方案是在@前面加上~。两者均能成功

2017-09-29 14:39:32 zeping891103 阅读数 3694

vue构造、vue组件和vue实例这三个是不同的概念,它们的关系有点类似于Java的继承概念:

关系:vue构造->vue组件->vue实例

也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件。在大型项目中,用过java开发的都知道,继承是非常重要的,前端也一样。我们先看看他们之间的实现代码区别:

<script>
	//vue构造
	Vue.extend({
		props: [],
		data: function() {
			return {}
		},
		template: ""

	});
	
	//vue组件
	Vue.component("mycomponent", {
		props: [],
		data: function() {
			return {}
		},
		template: ""
	});
	
	//vue实例
	new Vue({
		el: "",
		data: {}
	});
</script>

从上面的代码可以看出,vue构造和vue组件所需的部分初始化结构参数是一样的,这意味着vue实例可以直接跳过vue组件直接使用vue构造对自身组件初始化,也就是vue构造->vue实例,下面是三种API的区别:

vue.extend

特点:

1.只能通过自身初始化结构

使用范围:

1.挂载在某元素下

2.被Vue实例的components引用

3.Vue.component组件引用

<div id="app2"></div>
<script>
	var apple = Vue.extend({
		template: "<p>我是构造函数创建:自身参数:{{a}}|外部传参:{{b}}</p>",
		data: function() {
			return {
				a: "a"
			}
		},
		props: ["b"]
	});

	//挂载构造函数
	new apple({
		propsData: {
			b: 'Vue.extend'
		}
	}).$mount('#app2');
</script>

运行结果:

我是构造函数创建:自身参数:a|外部传参:Vue.extend。

Vue.component

特点:

1.可通过自身初始化组件结构

2.可通过引入Vue.extend初始化组件结构

3.可通过第三方模板temple.html初始化组件结构

使用范围:

任何已被vue初始化过的元素内

<div id="app3">
	<applecomponent v-bind:b="vparam"></applecomponent>
	<mycomponent v-bind:b="vparam"></mycomponent>
	<templecomponent v-bind:b="vparam"></templecomponent>
</div>

<script>
	//方法1 【引入构造】
	Vue.component('applecomponent', apple);
	//方法2 【自身创建】
	Vue.component("mycomponent", {
		props: ["b"],
		data: function() {
			return {
				a: "a"
			}
		},
		template: "<p>我是vue.component创建 自身参数:{{a}}|外部传参:{{b}}</p>"
	});
	//方法3 第三方模板引入,可参照上一篇文章
	Vue.component('templecomponent', function(resolve, reject) {
		$.get("./../xtemplate/com.html").then(function(res) {
			resolve({
				template: res,
				props: ["b"],
				data: function() {
					return {
						a: "a"
					}
				}
			})
		});
	});
	var app3 = new Vue({
		el: "#app3",
		data: {
			vparam: "Vue.component"
		}
	});
</script>

运行结果:

我是构造函数创建:自身参数:a|外部传参:Vue.component
我是vue.component创建 自身参数:a|外部传参:Vue.component
我是导入模板 自身参数:a|外部入参:Vue.component


new Vue

this.$options.key表示其自定义属性值,this.$??表示系统属性值,如this.$el

特点:

1.可以通过自身components引用Vue.extend构造,通过自身data向构造传参

2.可以通过自身components引用组件模板,通过自身data向组件传参

使用范围:

1.仅限于自身

<div id="app1">
	<dt1></dt1>
	<vueapple v-bind:b="msg"></vueapple>
</div>

<script type="text/x-template" id="dt1">
	<div>这里是子组件1</div>
</script>

<script>
	new Vue({
		el: "#app1",
		data: {
			msg: "vue实例参数"
		},
		components: {
			dt1: {
				template: "#dt1"
			},
			vueapple: apple //【引入构造】
		}
	});
</script>

运行结果:

这里是子组件1
我是构造函数创建:自身参数:a|外部传参:vue实例参数

 

2018-10-16 11:19:27 qq_31122833 阅读数 17710

对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。

先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。

下载vue.js  地址:https://download.csdn.net/download/qq_31122833/10723310,下载完之后在HTML中加入vue.js包。

<script src="${path}/web/constant/vue.js"></script>

 在当前html中,写入js代码:

<script type="text/javascript">
    new Vue({
        el:'#app',
        data: {
            message:'hello vue.js.'
        }
    });
</script>

html中,加入如下代码:

<h1>Vue demo</h1>
    <div id="app">
    <div>{{message}}</div>
    <input type="text" v-model="message">
</div>

修改文本框中的内容,可以看到文本框上方的内容也在相应改变;这就是vue的双向绑定。

2018-11-12 10:09:24 u012540058 阅读数 1136

vue函数组件

有时候我们需要在非vue文件使用组件,这时候我们可以通过vue插件的方式使用

一、js加载文件

import Vue from 'vue';
import toast from'./index.vue';
const ToastConstructor = Vue.extend(toast);
let toastPool = [];
let instance;
let installed = false;
//安装组件
const install = function (Vue, config = {}) {
  if (installed) return;
  console.log(installed);
  Vue.component(toast.name, toast);
  installed = true;
};
install(Vue);
let getAnInstance = () => {
  if (toastPool.length > 0) {
  let instance = toastPool[0];
  toastPool.splice(0, 1);
  return instance;
  }
  return new ToastConstructor({
  el: document.createElement('div')
 });
};

let Toast = (options = {}) => {
  console.log('Toast', options);
  let duration = options.duration || 3000;
  let instance = getAnInstance();
  instance.closed = false;
  clearTimeout(instance.timer);
  instance.message = typeof options === 'string' ? options : options.message;
  instance.position = options.position || 'middle';
  instance.className = options.className || '';
  instance.type = options.type || '';
  instance.iconClass = options.iconClass || '';
  instance.duration = duration / 1000;
  document.body.appendChild(instance.$el);
  Vue.nextTick(function () {
  instance.visible = true;
  setTimeout(() => {
  instance.visible = false;
  if (options.close) {
  options.close();
  }
 }, duration);
  });

  return instance;
};
export default Toast;

二、vue件

<template>
<div class="toast " :class="position " v-if="visible" :style="style()">
 <span class="toast-msg" :class="type">{{message}}span>
div>
template>

<style>
@keyframes toastKF {
  0% {
  opacity: 0;
}
  25% {
  opacity: 1;
  z-index: 9999
}
  50% {
  opacity: 1;
  z-index: 9999
}
  75% {
  opacity: 1;
  z-index: 9999
}
  100% {
  opacity: 0;
  z-index: 0
}
}
style>

<style scoped lang="less">
.toast {
  opacity: 0;
  position: fixed;
  color: #fff;
  width: 100%;
  text-align: center;

&.top {
  top: 5%;
  }

&.bottom {
  bottom: 5%;
  }
&.middle {
  top: 50%;
  }
.toast-msg {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 8px 15px;
  border-radius: 4px;
  max-width: 80%;
  display: inline-block;
  margin: auto;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

 &.danger {
  background: red;
  color: #fff;
  }

  &.success {
  background: #70ca63;
  color: #fff;
  }

  &.primary {
  background: #3bafda;
  color: #fff;
  }
  &.warning {
  background: #f6bb42;
  color: #fff;
  }
 }&.toastAnimate {
  animation: toastKF 3s;
  }

}
style>

<script type="text/babel">
export default {
  name: 'toast',
  props: {
  duration: {
  type: Number,
  default: 2
  },
  type: {
  type: String,
  default: 'primary'
  },
  message: {
  type: String,
  default: ''
  },

  position: {
  type: String,
  default: 'middle'
  }

 },
  mounted(){
  console.log('mounted');
  },
  watch: {
  duration(){
  this.toastAnimate = `animation: toastKF ${this.duration}s;`;
  }
 },
  data() {
  return {
  el: this.$el,
  visible: false,
  toastAnimate: `animation: toastKF ${this.duration}s;`
  };
  },
  methods: {
  style(){
  if (this.visible) {
  return this.toastAnimate;
  }
 } },

  computed: {}
};
script>

三、使用

import Toast from '../../../../components/toast/index.js';
Toast({
  message: msg,
  type: 'warning'
});
2018-07-26 15:48:35 u012145252 阅读数 2131

npm安装vue

by 铁乐猫

Vue.js 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

  • 数据驱动视图

    • 数据驱动是vuejs最大的特点。
    • 在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom
  • 声明式渲染

    • Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

直接用script引入

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。
注:在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!

安装vue

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpackBrowserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件

# 最新稳定版
$ npm install vue

对不同构建版本的解释

NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。
这里列出了它们之间的差别:

UMD CommonJS ES Module
完整版 vue.js vue.common.js
只包含运行时版 vue.runtime.js vue.runtime.common.js
完整版 (生产环境) vue.min.js -
只包含运行时版 (生产环境) vue.runtime.min.js -

安装命令行工具 (CLI)

Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档

安装cnpm

在国内,使用淘宝的镜像会比较快安装一些包。

我前面己经安装好了node.js和npm,上图是进入命令行,npm安装cnpm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了:

$ cnpm install [name]

安装vue-cli

vue-cli用于快速搭建大型单页应用,可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

$ cnpm install --global vue-cli

如上图,使用--global选项是因为这样可以在全局下使用vue-cli工具来创建vue项目,而不是要在特定的安装目录下才能使用vue-cli。

$ vue -v查看版本验证安装成功与否

因为vue命令去初始化项目的时候实际上还是使用的是npm去安装各种模块,并没有使用cnpm,所以还是先设置npm使用淘宝中的镜像比较快。

新建vue项目

新建一个项目文件夹,进入该文件夹后敲以下命令初始化一个vue项目
vue init webpack 项目名称

其中webpack为vue的其中一个模板。
查看帮助得知,如果自己的github仓库上 己有模板也可指定github上的仓库来初始化项目:

下图开始初始化一个vue项目,利用的就是vue-cli和webpack:
vue init webpack my-project

? Project name vue-start //项目名称
? Project description A Vue.js project // 项目描述
? Author  // 作者名称
? Vue build standalone // 推荐选前者

? Install vue-router?  
// 是否安装vue-router路由组件,也可不安装使用第三方或简单的项目自己写

? Use ESLint to lint your code? 
// 是否使用eslint管理代码,个人项目不推荐

? Set up unti tests?
// 是否使用karma来做单元测试

? Setup e2e tests with Nightwatch?
// 是否安装e2e测试

? Should we run 'npm install' for you after the project has been created?
// 选择使用npm或yarn进行安装模块

一路填写所需信息后,回车执行,一段时间安装完模块等后初始化完成。

没安装那几个模块,大小也去到100多M了,果然是要建立大型的项目时才去做vue-cli init 项目的事情比较好阿。平常的就直接使用vue.js好了。

运行服务

进入项目目录,按之前看到的提示,运行npm run dev命令进入开发:

默认监听8080端口,服务器己经启动,目前是在开发环境下。

访问默认的localhost:8080,出现的就是vue的欢迎页面如下,表示正常:

退出监听,直接关闭cmd窗口即可。

目录结构

  • build – 大部分是webpack的配置文件
  • config – 配置文件,比如配置监听端口
  • node_modules – 依赖包都在这里
  • src – 主工程文件夹,基本上所有的开发都在这个文件夹进行
  • static – 静态文件目录
  • package.json – 项目的一些配置信息

【end】

vuetransition使用

博文 来自: tjzc1352640
没有更多推荐了,返回首页