怎么用cms做网站,网站效果图用什么做,建设银行哈尔滨分行网站,两个字的广告公司名字项目目录结构#xff1a; 1.在一个项目中一般的目录结构为#xff1a;my_project------------项目文件夹|____src--------------------------------存放人可以看懂的源代码#xff0c;具备一定功能划分#xff0c;mvc思想|____dist-------------------------------存放真实…项目目录结构 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 idapp{{ message | uppercase }}/div!-- message为输出的值uppercase为处理message定义在filters的函数名,即过滤器第一个参数为值第二个参数为处理函数 --scriptnew Vue({el:#app,data:{message:hello},filter:{uppercase(value){return value.toString().charAt(0).toUpperCase() value.slice(1)}}})/script
vue中template的基础语法 template!-- 模板语法vue内置了一套模板引擎是数据驱动的如下 --div idappspan输出num的值{{hello}}/span !-- {{变量名}} -----Mustache语法控制定义变量的输出 --span v-htmlhello/span!-- v-html变量名 ---------Html赋值 元素的innerHTML注意这里变量的输出不能包含{{}}直接写变量名字符串 --span v-texthello/span!-- v-text变量名 ---------text赋值 元素的innerText注意这里变量的输出不能包含{{}}直接写变量名字符串 ,只能在双标签中使用--ulli v-forperson in persons{{person.name}}/li!-- v-foritem in array/object ---------遍历数组或者对象每一项为item --li v-is组件名称/li!-- 某些标签只能嵌套在特定的标签中才会正常显示但是组件并不一定是这个特定的标签此时可以使用特定标签加v-is组价名来实现渲染 --/ulspan v-bind:idpersonid/span!-- v-bind:属性名变量的key------v-bind: 简写为 给元素绑定属性并给值 --span :idpersonid/span!-- v-bind简写形式 --span v-bind:classclassName ? red : yellow/span!-- v-bind:classclassName ? red : yellow 利用三元表达式控制两样式选其中一种注意引号内使用引号的情况 --a v-bind:hrefurl新页面/a!-- 动态设置url --a v-bind:[id]url 动态设置参数使用:[参数] /aspan{{ true ? names : NO }}/span!-- {{ 表达式 ? true时输出的内容 : NO时输出的内容 }}--------使用表达式(三元表达式)这里如果要输出变量那么直接在后面跟上变量key即可无需加{{}} --input typetext v-modelhello!-- v-model变量名---给元素input、textarea、select绑定双向数据,数据是双向改变的,js内存数据改变影响页面;在不同的标签上数据是不同的 --span{{message|capitalize}}/span!-- {{message|capitalize}} 和 v-bind:idrawld|formatld-----过滤器,后面介绍 --span v-bind:idrawld|formatld/span!-- Class和Style绑定 --span :class{colors:isActive,fonts:isActive}{{hello}}/span!-- 对象语法v-bind:class{colors:isActive,fonts:isActive} ------colors和fonts是定义的class类名无需在data中声明isActive是定义的变量当isActive为true时显示定义类的样式内容否则不显示。 --span :class[fontColor,fontSize]{{hello}}/span!-- 数组语法:v-bind:class[fontColor,fontSize] ------fontColor和fontSize是定义在data中的变量名它们的值为样式类名字符串只要给数组加上变量那么这个变量对应类名控制的样式就会添加给元素 --span :style{color:activeColor,fontSize:fontSize px}{{hello}}/span!-- style语法v-bind:style{color:activeColor,fontSize:fontSize px}----color和fontSize等指CSS样式属性它们的值为定义在data中对应CSS属性的值 --!-- 条件渲染 --span v-ifisExist{{hello}}/span!-- 条件渲染:v-ifisExist---- v-if控制元素是否存在,当定义在data中的变量isExist值为false时,这个元素消失(控制台看不到此元素),并非隐藏isExist值为true时出现 --span v-showisExist{{hello}}/span!-- 条件渲染:v-showisExist---- v-show控制元素是否显示,当定义在data中的变量isExist值为false时,这个元素隐藏display:none并非消失isExist值为true时显示--!-- 条件渲染v-else:此指令需要和v-if指令结合使用当v-if中isExist变量值为false时出现v-else指令所在标签值为true时消失 --div v-ifisExist{{hello}}/divdiv v-else{{word}}/div!-- 条件渲染v-else-if:此指令需要和v-if及v-else指令结合使用(建议结合)当v-if中isExist变量值为false时再判断v-else-if指令的条件如值为true时执行否则执行v-else指令和原生中if/else if/else执行一样 --div v-ifisExist{{hello}}/divdiv v-else-ifisShow{{word}}/divdiv v-else{{jack}}/div!-- 条件渲染组当需要对多个元素进行条件渲染时可以使用template进行包裹渲染完后是没有template标签的--template v-ifokh3h1/h3pP1/p/templatediv v-cloak{{hello}}/div!-- 控制当编译完后才显示可以隐藏未编译的 Mustache 标签直到编译完在显示 --!-- v-for in 遍历数组 --li v-foritem in arrays{{item}}/li!--arrays可以是一个整数此时从1遍历到这个整数值--li v-for(item,index) in arrays{{item}}-{{index}}/lili v-foritem of arrays{{item}}/li!--也可使用of代替in--li v-foritem in arrays :keyitem.id{{item}}/li!--给每项通过key添加唯一标识便于找到自己--!-- 也可以在template 中使用v-for遍历一组内容 --!-- v-for in 遍历对象 --li v-forvalue in objects{{value}}/lili v-for(value,key) in objects{{value}}-{{key}}/lili v-for(value,key,index) in objects{{value}}-{{key}}-{{index}}/li!-- 事件处理器 --button v-on:click.stopalerts()弹框/button!-- 绑定事件v-on:事件事件处理函数名括号可以省略处理函数是定义在methods中的函数);v-on可以简写为注意直接在事件前面加如click --a v-on:[even]functionName 动态参数设置事件类型 /a!-- 事件修饰符 --button click.stopalerts()弹框/button!--这里stop阻止冒泡事件 --button click.preventalerts()弹框/button!--这里.prevent阻止默认事件 --button click.stop.preventalerts()弹框/button!--这里stop.prevent也是阻止默认事件只是是串联修饰符 --button click.selfalerts()弹框/button!--这里self表示给自身绑定事件 --button click.oncealerts()弹框/button!--这里once表示只触发一次事件 --!-- 访问原始DOM事件$event如$event.preventDefault()--button clickremove,show(e)/button!-- 给同一个事件绑定多个处理函数 --!--按键修饰符--input keyup.entersubmit /!--只有按enter键时触发事件函数--input keyup.KEYsubmit /!--只有按下指定的键时触发事件函数KEY可以是按键的key值--!--鼠标按钮修饰符.left .right .middle--!-- 更多建议查阅相关文档 --!-- Vue组件全局组件和局部组件单页面一般是局部组件多页面一般是全局组件。父子组件通讯-数据传递父组件向子组件通过Props传递数据子组件是不允许给父组件传递的但是可以通过Emit变相的底部触发实现传递。Slot插槽后面详细介绍。 --/div/templatevue文件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根节点中添加input typetext v-modeltext即可实现数据双向绑定主要是v-model指令的功劳list: [{ name: jack }, { naem: join }, { name: qun }] //将此列表渲染在*.veu 文件头部template中根节点写入如下// ul// li v-forpersons in list //v-for指令用于遍历// {{persons.name}}// /li// /ul}},//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: {}}/scriptvue中style基础语法 style scoped/* 这里添加scoped表示这里定义的样式只在此组件中有效如果没有加此标识那么引入此组件的其他组件也是会使用到这里的样式的建议添加 *//* 正常书写css代码即可 *//style提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者删除。 笔者苦海
