微名片网站怎么做,建立网站商城建议,ui设计app界面图片,网站建站安全需求Vue概述
通过我们学习的htmlcssjs已经能够开发美观的页面了#xff0c;但是开发的效率还有待提高#xff0c;那么如何提高呢#xff1f;我们先来分析下页面的组成。一个完整的html页面包括了视图和数据#xff0c;数据是通过请求从后台获取的那么意味着我们需要将后台获取…Vue概述
通过我们学习的htmlcssjs已经能够开发美观的页面了但是开发的效率还有待提高那么如何提高呢我们先来分析下页面的组成。一个完整的html页面包括了视图和数据数据是通过请求从后台获取的那么意味着我们需要将后台获取到的数据呈现到页面上很明显这就需要我们使用DOM操作。正是因为这种开发流程座椅我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想即让我们开发者更加关注数据而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢
MVVM其实是Model-View-ViewModel的缩写有3个单词具体释义如下 ● Model: 数据模型特指前端中通过请求从后台获取的数据 ● View: 视图用于展示数据的页面可以理解成我们的htmlcss搭建的页面但是没有数据 ● ViewModel: 数据绑定到视图负责将数据Model通过JavaScript的DOM技术将数据展示到视图View上
如图所示就是MVVM开发思想的含义 基于上述的MVVM思想其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分我们将来会学习一款ElementUI框架来替代HTMLCSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架用来替代JavaScript的DOM操作让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢可以参考下图对比 在更加复杂的dom操作中vue只会变得更加的简单在上述的代码中我们看不到之前的DOM操作因为vue全部帮我们封装好了。
接下来我们来介绍一下vue。
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层并且非常容易学习非常容易与其他库或已有项目整合。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
快速入门
接下来我们通过一个vue的快速入门案例来体验一下vue。
第一步在VS Code中创建名为12. Vue-快速入门.html的文件并且在html文件同级创建js目录将资料/vue.js文件目录下得vue.js拷贝到js目录如下图所示 第二步然后编写script标签来引入vue.js文件代码如下
script srcjs/vue.js/script
第三步在js代码区域定义vue对象,代码如下
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue}})
/script
在创建Vue对象时有几个常用的属性 ● el用来指定那些标签受Vue管理。该属性取值#app中的app需要是受管理的标签的id属性值 ● data: 用来定义数据模型 ● methods用来定义函数。这个我们在后面就会用到
第四步在html区域编写视图其中{{}}是插值表达式用来将vue对象中定义的model展示到页面上的
bodydiv idappinput typetext v-modelmessage{{message}}/div
/body
浏览器打开效果如图所示 整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-快速入门/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typetext v-modelmessage{{message}}/div/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue}})
/script
/html
Vue指令
在上述的快速入门中我们发现了html中输入了一个没有学过的属性v-model这个就是vue的指定。
指令HTML标签中带有v-前缀的特殊属性不同指令具有不同含义。例如v-ifv-for...
在vue中通过大量的指令来实现数据绑定到视图的所以接下来我们需要学习vue的常用指令如下表所表示
指令作用v-bind为HTML标签绑定属性值如设置hrefcss样式等v-model为表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素判定为true时渲染否则不渲染v-elsev-else-ifv-show根据条件展示某元素区别在于切换的是display属性的值v-for 列表渲染遍历容器的元素或者对象的属性
v-bind和v-model
我们首先来学习v-bind指令和v-model指令。
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model 在表单元素上创建双向数据绑定
● v-bind为HTML标签绑定属性值如设置hrefcss样式等。当vue对象中的数据模型发生变化时标签的属性值会随之发生变化。
接下来我们通过代码来演示。
首先我们在VS Code中创建名为13. Vue-指令-v-bind和v-model.html的文件然后准备好如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-bind/titlescript srcjs/vue.js/script
/head
bodydiv idappa 链接1/aa 链接2/ainput typetext /div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{url: https://www.baidu.com}})
/script
/html
在上述的代码中我们需要给a标签的href属性赋值并且值应该来自于vue对象的数据模型中的url变量。所以编写如下代码
a v-bind:hrefurl链接1/a
在上述的代码中v-bind指令是可以省略的但是:不能省略所以第二个超链接的代码编写如下
a :hrefurl链接2/a
浏览器打开2个超链接都可以点击然后跳转到百度去效果如图所示 注意html属性前面有:表示采用的vue的属性绑定
● v-model在表单元素上创建双向数据绑定。什么是双向 ○ vue对象的data属性中的数据变化视图展示会一起变化 ○ 视图数据发生变化vue对象的data属性中的数据也会随着变化。
data属性中数据变化我们知道可以通过赋值来改变但是视图数据为什么会发生变化呢只有表单项标签所以双向绑定一定是使用在表单项标签上的。编写如下代码
input typetext v-modelurl
打开浏览器我们修改表单项标签发现vue对象data中的数据也发生了变化如下图所示 通过上图我们发现我们只是改变了表单数据那么我们之前超链接的绑定的数据值也发生了变化为什么
就是因为我们双向绑定在视图发生变化时同时vue的data中的数据模型也会随着变化。那么这个在企业开发的应用场景是什么
双向绑定的作用可以获取表单的数据的值然后提交给服务器
整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-bind/titlescript srcjs/vue.js/script
/head
bodydiv idappa v-bind:hrefurl链接1/aa :hrefurl链接2/ainput typetext v-modelurl/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{url: https://www.baidu.com}})
/script
/html
v-on
接下来我们学习一下v-on指令。
v-on用来给html标签绑定事件的。需要注意的是如下2点 ● v-on语法给标签的事件绑定的函数必须是vue对象中声明的函数 ● v-on语法绑定事件时事件名相比较js中的事件名没有on
例如在js中事件绑定demo函数
input onclickdemo()
vue中事件绑定demo函数
input v-on:clickdemo()
接下来我们通过代码演示。
首先在VS Code中创建名为14.Vue-指令-v-on.html的文件提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-on/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typebutton value点我一下input typebutton value点我一下/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {}})
/script
/html
然后我们需要在vue对象的methods属性中定义事件绑定时需要的handle()函数代码如下
methods: {handle: function(){alert(你点我了一下...);}
}
然后我们给第一个按钮通过v-on指令绑定单击事件代码如下
input typebutton value点我一下 v-on:clickhandle()
同样v-on也存在简写方式即v-on可以替换为所以第二个按钮绑定单击事件的代码如下
input typebutton value点我一下 clickhandle()
完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-on/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typebutton value点我一下 v-on:clickhandle()input typebutton value点我一下 clickhandle()/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {handle: function(){alert(你点我了一下...);}}})
/script
/html
v-if和v-show
指令描述v-if条件性的渲染某元素判定为true时渲染否则不渲染v-if-elsev-elsev-show 根据条件展示某元素区别在于切换的是display属性的值
我们直接通过代码来演示效果。在VS Code中创建名为15.Vue-指令-v-if和v-show.html的文件提前按准备好如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-if与v-show/titlescript srcjs/vue.js/script
/head
bodydiv idapp年龄input typetext v-modelage经判定,为:span年轻人(35及以下)/spanspan中年人(35-60)/spanspan老年人(60及以上)/spanbrbr/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{age: 20},methods: {}})
/script
/html
其中采用了双向绑定到age属性意味着我们可以通过表单输入框来改变age的值。
需求是当我们改变年龄时需要动态判断年龄的值呈现对应的年龄的文字描述。年轻人我们需要使用条件判断age35,中年人我们需要使用条件判断age35 age60,其他情况是老年人。所以通过v-if指令编写如下代码
年龄input typetext v-modelage经判定,为:
span v-ifage 35年轻人(35及以下)/span
span v-else-ifage 35 age 60中年人(35-60)/span
span v-else老年人(60及以上)/span
浏览器打开测试效果如下图 v-show和v-if的作用效果是一样的只是原理不一样复制上述html代码修改v-if指令为v-show指令代码如下
年龄input typetext v-modelage经判定,为:
span v-showage 35年轻人(35及以下)/span
span v-showage 35 age 60中年人(35-60)/span
span v-showage 60老年人(60及以上)/span
打开浏览器展示效果如下所示 可以发现浏览器呈现的效果是一样的但是浏览器中html源码不一样。v-if指令不满足条件的标签代码直接没了而v-show指令中不满足条件的代码依然存在只是添加了css样式来控制标签不去显示。
完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-if与v-show/titlescript srcjs/vue.js/script
/head
bodydiv idapp年龄input typetext v-modelage经判定,为:span v-ifage 35年轻人(35及以下)/spanspan v-else-ifage 35 age 60中年人(35-60)/spanspan v-else老年人(60及以上)/spanbrbr年龄input typetext v-modelage经判定,为:span v-showage 35年轻人(35及以下)/spanspan v-showage 35 age 60中年人(35-60)/spanspan v-showage 60老年人(60及以上)/span/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{age: 20},methods: {}})
/script
/html
v-for
v-for从名字我们就能看出这个指令是用来遍历的。其语法格式如下
标签 v-for变量名 in 集合数据模型{{变量名}}
/标签
需要注意的是需要循环那个标签v-for指令就写在那个标签上。
有时我们遍历时需要使用索引那么v-for指令遍历的语法格式如下
标签 v-for(变量名索引变量 in 集合数据模型!--索引变量是从0开始所以要表示序号的话需要手动的加1--{{索引变量 1}} {{变量名}}
/标签
接下来我们再VS Code中创建名为16.Vue-指令-v-for.html的文件编写代码演示提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-for/titlescript srcjs/vue.js/script
/head
bodydiv idapp/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{addrs:[北京, 上海, 西安, 成都, 深圳]},methods: {}})
/script
/html
然后分别编写2种遍历语法来遍历数组展示数据代码如下
div idappdiv v-foraddr in addrs{{addr}}/divhrdiv v-for(addr,index) in addrs{{index 1}} : {{addr}}/div
/div
浏览器打开呈现如下效果 生命周期
vue的生命周期指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示
状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed 销毁后
下图是Vue官网提供的从创建Vue到效果Vue对象的整个过程及各个阶段对应的钩子函数 其中我们需要重点关注的是mounted,其他的我们了解即可。
mounted挂载完成Vue初始化成功HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据
我们在VS Code中创建名为18. Vue-生命周期.html的文件编写代码来演示效果提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-for/titlescript srcjs/vue.js/script
/head
bodydiv idapp/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {}})
/script
/html
然后我们编写mounted声明周期的钩子函数与methods同级代码如下
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {},mounted () {alert(vue挂载完成,发送请求到服务端)}})
/script
浏览器打开运行结果如下我们发现自动打印了这句话因为页面加载完成vue对象创建并且完成了挂在此时自动触发mounted所绑定的钩子函数然后自动执行弹框。
