项目目录结构:
1.在一个项目中一般的目录结构为:
my_project------------项目文件夹
|____src--------------------------------存放人可以看懂的源代码,具备一定功能划分,mvc思想
|____dist-------------------------------存放真实上线的代码(减少请求、混淆代码)
|____webpack.config.js------------------把src下面的代码打包生成dist下的代码, 1. 命令行(终端)输入:webpack ,立即读取webpack.config.js文件,并生成代码到dist文件夹中,此为生产时使用
| 2.测试时使用:webpack-dev-server运行src下面的代码,虚拟出build.js进行测试。
|____package.json-----------------------包管理文件,管理项目所依赖的包,供npm init初始化使用
|____node_module------------------------依赖的包
2.使用脚手架vue-cli初始化的项目中基本文件结构:
build------------打包的配置所在的文件夹
|____build.js--------------------------------构建生产版本,打生产的包
|____check-versions.js-----------------------
|____dev-client.js---------------------------
|____dev-server.js---------------------------
|____utils.js--------------------------------
|____vue-loader.conf.js----------------------
|____webpack-base.conf.js--------------------webpack打包核心配置
|____webpack-dev.conf.js---------------------
|____webpack-prod.conf.js--------------------
config-----------webpack的配置文件夹
|____dev.env.js------------------------------
|____index.js--------------------------------核心配置,和webpack-base.conf.js基本一样,webpack把他分开架构
|____prod.env.js-----------------------------
src--------------开发项目的源码文件夹
|____assets----------------------------------静态资源文件夹
|____components------------------------------组件文件夹
|____router----------------------------------路由文件夹
|____App.vue---------------------------------入口组件,后缀为.vue的文件都是组件
|____main.js---------------------------------项目入口文件
static-----------静态资源文件夹
|____.gitkeep--------------------------------
|____.babeirc--------------------------------es6解析的配置,开发ES6项目需要加这个配置文件 或者 在 webpack中代码配置
|____.editorconfig---------------------------编辑器的配置
|____.gitignore------------------------------配置Git提交时要忽略的文件
|____.postcssrc.js---------------------------html添加前缀的配置
|____index.html------------------------------单页面的入口文件
|____package.json----------------------------项目的基本配置,可以得知项目的基础配置,如包的版本号之类的
|____README.md-------------------------------说明文档
过滤器:
1.vue中没有提供内置过滤器,但是可以自定义过滤器,过滤器:把结果处理后渲染。
2.过滤器分为:组件内的过滤器 和 全局过滤器
1.组件内的过滤器:export default中的filters对象属性,key就是过滤器名,value就是与key对应的过滤方式函数体
2.全局过滤器:vue.filter(名,function(){})
3.当全局过滤器和组件内过滤器重名时,组件内过滤器执行。
如案例:将一个message变量的第一个首字符转为大写后输出:
<div id="app">{{ message | uppercase }}div>
<<script>
new Vue({
el:'#app',
data:{
message:'hello'
},
filter:{
uppercase(value){
return value.toString().charAt(0).toUpperCase() + value.slice(1)
}
}
})
script>
vue中template的基础语法:
<template>
<div id='app'>
<span>输出num的值:{{hello}}span>
<span v-html='hello'>span>
<span v-text='hello'>span>
<ul>
<li v-for='person in persons'>{{person.name}}li>
<li v-is='组件名称'>li>
ul>
<span v-bind:id='personid'>span>
<span :id='personid'>span>
<span v-bind:class="className ? 'red' : 'yellow'">span>
<a v-bind:href="url">新页面a>
<a v-bind:[id]="url"> 动态设置参数使用:[参数] a>
<span>{{ true ? names : 'NO' }}span>
<input type='text' v-model='hello'>
<span>{{message|capitalize}}span>
<span v-bind:id='rawld|formatld'>span>
<span :class='{colors:isActive,fonts:isActive}'>{{hello}}span>
<span :class='[fontColor,fontSize]'>{{hello}}span>
<span :style="{color:activeColor,fontSize:fontSize + 'px'}">{{hello}}span>
<span v-if='isExist'>{{hello}}span>
<span v-show='isExist'>{{hello}}span>
<div v-if='isExist'>{{hello}}div>
<div v-else>{{word}}div>
<div v-if='isExist'>{{hello}}div>
<div v-else-if='isShow'>{{word}}div>
<div v-else>{{jack}}div>
<template v-if="ok">
<h3>h1h3>
<p>P1p>
template>
<div v-cloak>{{hello}}div>
<li v-for='item in arrays'>{{item}}li>
<li v-for='(item,index) in arrays'>{{item}}-{{index}}li>
<li v-for='item of arrays'>{{item}}li>
<li v-for='item in arrays' :key='item.id'>{{item}}li>
<li v-for='value in objects'>{{value}}li>
<li v-for='(value,key) in objects'>{{value}}-{{key}}li>
<li v-for='(value,key,index) in objects'>{{value}}-{{key}}-{{index}}li>
<button v-on:click.stop='alerts()'>弹框button>
<a v-on:[even]="functionName"> 动态参数设置事件类型 a>
<button @click.stop='alerts()'>弹框button>
<button @click.prevent='alerts()'>弹框button>
<button @click.stop.prevent='alerts()'>弹框button>
<button @click.self='alerts()'>弹框button>
<button @click.once='alerts()'>弹框button>
<button @click='remove,show(e)'>button>
<input @keyup.enter="submit" />
<input @keyup.KEY="submit" />
div>
template>
vue文件script基本语法:
<script>
// 引入子组件:在一个vue文件中可以引入另一个vue文件(一般是此组件的子组件)
import headervue from 'headervue.vue';
export default {
//1.name:-------给组件定义一个名字
name: 'test',
//2.data:function(){}-------变量的声明,一般实际开发中采用es6简写,如下:
data() {
return { //放数据的对象,vue中的变量都要在这里进行声明:
text: 'hello word!', //如果想要渲染text的内容,那么在*.veu 文件头部template中根节点使用{{}}包裹,即{{text}},在template根节点中添加:即可实现数据双向绑定(主要是v-model指令的功劳)
list: [{ name: jack }, { naem: join }, { name: qun }] //将此列表渲染:在*.veu 文件头部template中根节点写入,如下:
//
// //v-for指令用于遍历
// {{persons.name}}
//
//
}
},
//3.methods:{}-----方法的声明,用于声明函数方法供vue使用:
methods: {
add() {},
remove() {}
},
//4.components:{}------声明子组件,引入的组件要进行声明才可以正常使用,如果变量名和变量关键字相同,可以简写一个变量关键字即可:
components: {
headervue: headervue,
footervue
},
//5.props:[]------设置接收父组件传递过来的参数:
props: ['key1', 'key2'],
//6.filters:{}------声明过滤器:
filters: {
myfilter: function(value) {
return value;
}
},
//7.created(){}------事件处理函数,数据已经初始化,但是DOM还未生成:
created() {},
//8.mounted(){}-----数据装载DOM后,DOM已经生成
mounted() {},
//9.计算属性:里面可以定义函数,但是此函数会自动执行,用于解决模板中表达式过长问题(将表达式定义在函数中并返回,模板中使用函数名即可)
computed:{},//与methods不同的是computed是反应依赖缓存机制的;只要依赖数据不变,computed就不会再调函数,而是在缓存中拿数据
//10.侦听器:不管什么时候待处理的事发生变化,都会执行watch里面的函数:(可执行异步操作)
watch: {}
}
script>
vue中style基础语法:
<style scoped>/* 这里添加scoped表示这里定义的样式只在此组件中有效,如果没有加此标识,那么引入此组件的其他组件也是会使用到这里的样式的,建议添加 */
/* 正常书写css代码即可 */
style>
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:[email protected]联系笔者删除。
笔者:苦海