企业官网建设流程全解析

一. Vue 基础

(一) Vue 简介

🔰Vue 是渐进式JavaScript框架。
🔰官网文档：https://v2.cn.vuejs.org/v2/guide/
🔰Vue是基于MVVM模式实现的一套框架（把页面分成Model、View 、ViewModel 三部分）。

🔰MVVM的工作原理：

• 当数据源发生变化时，会被ViewModel 监听到，VM会根据最新的数据源自动更新页面的结构
• 当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model 数据源中

(二) 第一个Vue程序

1. 导入开发版本的 Vue.js

<!--开发环境版本，包含了有帮助的命令行警告--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 创建Vue实例对象，设置el属性和data属性

<script>varapp=newVue({el:"#apps",data:{message:"Hello Vue"}})</script>

4. 使用简洁的模板语法把数据渲染到页面上

<divid="apps">{ { message}}</div>

(三) el: 挂载点

🔰el是用来设置Vue实例挂载（管理）的元素

🔰Vue会管理el选项命中的元素及其内部的后代元素

🔰可以使用其他的选择器，但是建议使用ID选择器(el:"#apps"/ el:".apps"/ el:"div")

🔰可以使用其他的双标签，不能使用HTML和BODY

varapp=newVue({el:"#app"})

(四) data: 数据对象

🔰Vue中用到的数据定义在data中

🔰data中可以写复杂类型的数据

🔰渲染复杂类型数据时，遵守js的语法即可

🔰有多组数据时，用,隔开

<body><divid="app"><!-- 字符串 -->{ { message}}<!-- 对象 --><h2>{ {school.name}} { {school.mobile}}</h2><!-- 数组 --><li>{ {campus[0]}}</li></div></body><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>varapp=newVue({el:"#app",data:{// 字符串message:"Hello Vue",// 对象school:{name:"艾莉",mobile:"1234567"},// 数组campus:["北京小区","上海小区","新疆小区"]}})</script>

使用{ {}}获取到 data 内的数据，{ {}}可以书写数字，表达式，运算符号。

(五) methods：方法

🔰Vue中用到的方法定义在methods中

🔰有多个方法时，用,隔开

varapp=newVue({el:"#app",data:{content:0},methods:{方法名:function(){// 逻辑},dolt:function(){// 逻辑}}})

二. 内置指令

(一) v-text (内容绑定)

🔰作用：设置标签的内容

🔰默认写法会替换全部内容，使用差值表达式{ {}}可以替换指定内容

<h2v-text="message">大家好</h2>

若想部分替换，使用如下格式：

<h3>北民大，{ {message}}</h3>

若想写逻辑代码，支持写表达式：

<h2v-text="message + '!'">大家好</h2><h3>北民大，{ {message + "!"}}</h3>

(二) v-html (html 结构绑定)

🔰作用：设置元素的innerHTML

🔰内容中有html元素结构会被解析为标签

🔰v-text指令无论内容是什么，只会解析为文本

🔰解析文本使用v-text，需要解析html结构使用v-html

实例：

<pv-html="content"></p><script>varapp=newVue({el:"#app",data:{content:"<a href='#'>人民</a>"}})</script>

(三) v-show (显示切换 [修改display属性])

🔰作用：根据表达值的真假，切换元素的显示状态

🔰原理：修改元素的display属性，实现显示隐藏

🔰指令后面的内容，最终都会解析为布尔值

🔰值为true元素显示，值为false元素隐藏

🔰数据改变之后，对应元素的显示状态会同步更新

实例：根据表达值显示或隐藏元素

<!-- 为true，直接显示图片 -->1<imgsrc="./caocao.jpg"v-show="true"><!-- 变量 isShow 的值为true，显示图片 -->2<imgsrc="./caocaos.jpg"v-show="isShow"><!-- 表达式的值为true，显示图片 -->3<imgsrc="./caocao.jpg"v-show="age>=18">

（频繁切换，用v-show）

(四) v-if (显示切换 [操作 dom 元素])

🔰作用：根据表达值的真假，切换元素的显示状态

🔰本质：通过操纵dom元素来切换显示状态

🔰表达式的值为true，元素存在于dom树中；为false，从dom树中移除

实例：根据表达值，移除或保留元素

<divv-if="isShow">我是人！</div><divv-if="temperature > 35">好热呀！</div>

（一次性关闭，用v-if，如弹窗广告）

(五) v-bind (属性绑定)

🔰作用：设置元素的属性（如：src, title, class）

🔰完整写法是v-bind:属性名
<img v-bind:src="imgSrc">

🔰简写的话可以直接省略v- bind，只保留:属性名
<img :src="imgSrc">

🔰需要动态的增删class建议使用对象的方式

<img v-bind:class="isActive?'active':''">// 建议使用以下方式<img v-bind:class="{active:isActive}">

(六) v-for (列表循环)

🔰作用：根据数据生成列表结构

🔰数组经常和v-for结合使用

🔰语法是(item, index) in 数据

🔰item 和 index 可以结合其他指令一起使用

🔰数组长度的更新会同步到页面上，是响应式的

实例：数组遍历，对象遍历，添加 / 移除 对象元素

<body><spanid="app"><inputtype="button"value="添加数据"@click="add"><inputtype="button"value="移除数据"@click="remove"><ul><liv-for="(item, index) in arr":key="item.id">{ { index +1}} 学习专区 { { item }}</li></ul><spanv-for="item in vegetables":title="item.name">{ { item.name }}</span><divv-for="index,key,value in user">{ { index }}-- { {key }} -- { {value}}</div></span></body>

(七) v-model (表单元素绑定)

🔰作用：设置和获取表单元素的值（双向数据绑定）

🔰绑定的数据会和表单元素值相关联

🔰邦定的数据←→表单元素的值

实例：输入内容和下面的内容同步更新

<body><divid="app"><inputv-model="massage"type="text"><h2>{ {massage}}</h2></div></body><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>varapp=newVue({el:"#app",data:{massage:'艾莉'}})</script>

🔰为了方便用户输入的内容进行处理，vue为v-model指令提供了3个修饰符：

(八) v-on (事件绑定)

🔰作用：为元素绑定事件，如click等；

🔰事件名不需要写on；–>v-on: 事件名="方法"v-on: click="dolt"

🔰指令可以简写为@； -->(v-on: click="dolt" --> @click="dolt")

🔰绑定的方法定义在methods属性中；

🔰方法内部通过this关键字可以访问定义在data中数据

<script>varapp=newVue({el:"#app",data:{food:"西红柿炒鸡蛋"},methods:{dolt:function(){this.food+="好好吃！"}}})</script>

1. 事件方法传参

🔰事件绑定的方法写成函数调用的形式，可以传入自定义参数
<input type="button" @click="dolt(2, '古力')">

🔰定义方法时需要定义形参来接收传入的实参
dolt:function(p1, p2) { console.log(p1 + p2); }

🔰事件的后面跟上.修饰符可以对事件进行限制
🔰.enter可以限制触发的按键为回车
<input type="text" @keyup.enter="sayHi">

<body><divid="app"><inputtype="button"@click="dolt(2, '古力')"><inputtype="text"@keyup.enter="sayHi"></div></body><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>varapp=newVue({el:"#app",methods:{dolt:function(p1,p2){console.log(p1+p2);},sayHi:function(){alert('你好')}}})</script>

2. 事件修饰符

🔰事件修饰符：是和事件连接起来决定事件的触发或者阻止

1. stop:阻止事件冒泡 (给孩子添加，阻止冒泡)
2. prevent:用于阻止标签的默认事件
3. self:用来针对当前标签的事件触发 (给父亲添加，阻止孩子骚扰)
4. once:只让事件执行一次

<!-- 阻止单击事件继续传播 --><av-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><formv-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><av-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><formv-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --><!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --><divv-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><divv-on:click.self="doThat">...</div><!-- prevent:用于阻止标签的默认事件 --><ahref