网站被搜索引擎收录,哪个网站做螺丝生意好,河北省住房和城市建设厅网站,专门做搞笑视频的网站Vue入门
Vue概述
Vue (读音/vju/#xff0c;类似于view)是一套用于构建用户界面的渐进式框架#xff0c;发布于2014年2月。与其它大型框架不同的是#xff0c;Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层#xff0c;不仅易于上手#xff0c;还便于与第三…Vue入门
Vue概述
Vue (读音/vju/类似于view)是一套用于构建用户界面的渐进式框架发布于2014年2月。与其它大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层不仅易于上手还便于与第三方库(如: vue-router:跳转vue-resource:通信vuex:管理或既有项目整合。
什么是MVVM
MVVMModel-View-ViewModel是一种软件设计模式由微软WPF用于替代WinForm以前就是用这个技术开发桌面应用程序的和Silverlight类似于Java Applet简单点说就是在浏览器上运行WPF的架构师Ken Cooper和Ted Peters开发是一种简化用户界面的事件驱动编程方式。由John Gossman同样也是WPF和Sliverlight的架构师与2005年在他的博客上发表。
MVVM源自于经典的MVCModel-View-Controller模式。MVVM的核心是ViewModel层负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下
该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互
MVVM已经相当成熟了主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.jsAnfular JS
优点
MVVM模式和MVC模式一样主要目的是分离视图View和模型Model有几大好处 低耦合视图View可以独立于Model变化和修改一个ViewModel可以绑定到不同的View上当View变化的时候Model可以不变当Model变化的时候View也可以不变。 可复用你可以把一些视图逻辑放在一个ViewModel里面让很多View重用这段视图逻辑。 独立开发开发人员可以专注于业务逻辑和数据的开发ViewMode设计人员可以专注于页面设计。 可测试界面素来是比较难以测试的而现在测试可以针对ViewModel来写。
1View View是视图层 也就是用户界面。前端主要由HTML和CSS来构建 为了更方便地展现vi ew Model或者Model层的数据 已经产生了各种各样的前后端模板语言 比如FreeMarkerThymeleaf等等 各大MVVM框架如Vue.js.Angular JS EJS等也都有自己用来构建用户界面的内置模板语言。
2Model Model是指数据模型 泛指后端进行的各种业务逻辑处理和数据操控 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则
3ViewModel ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层 前端开发者对从后端获取的Model数据进行转换处理 做二次封装 以生成符合View层使用预期的视图数据模型。
需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分 而Model层的数据模型是只包含状态的。
比如页面的这一块展示什么那一块展示什么这些都属于视图状态(展示) 页面加载进来时发生什么点击这一块发生什么这一块滚动时发生什么这些都属于视图行为(交互) 视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定 View Model的内容会实时展现在View层 这是激动人心的 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
MVVM框架已经把最脏最累的一块做好了 我们开发者只需要处理和维护View Model 更新数据视图就会自动得到相应更新真正实现事件驱动编程。
View层展现的不是Model层的数据 而是ViewModel的数据 由ViewModel负责与Model层交互 这就完全解耦了View层和Model层 这个解耦是至关重要的 它是前后端分离方案实施的重要一环。
第一个Vue程序
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title!-- 1.导入vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
/head
body
!-- view 层 模板 --
div idapp{{message}}
/divscriptvar vm new Vue({el: #app,// model 数据data:{message:hello Vue}});
/script
/body
/html el: ‘#test’绑定元素的ID好玩的地方在于我们可以在浏览器中操作vm对象来动态的修改参数这和jQuery有点类似。 MVVM架构中最重要的就是ModelView层它可以提供JSON和Ajax来实现与Model层的交互 大差不差就是这个样子。我们可以感受到他是不需要改变DOM元素的这就让我们的开发大大解耦了
因为我们对页面内容可以动态的修改这样避免了大量的刷新。
{{message}}其实就是虚拟DOM元素
Vue基本语法
七大属性 el 绑定id用来指示vue编译器从什么地方开始解析 vue的语法可以说是一个占位符。 相当于一个容器跟上面的div id app做关联从此以后上面div id app里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容 data 用来组织从view中抽象出来的属性可以说将视图的数据抽象出来存放在data中 跟微信小程序一样所有的变量都要写在data里面 methods 放置页面中的业务逻辑js方法一般都放置在methods中 computed后面会介绍 computed和methods是有区别的computed是在值发生改变的时候才会触发效果而methods只要刷新执行了就会触发所有平时写VUE的时候能用computed的尽量使用 computed 定义计算属性的方法 根据已经存在的属性计算出新的属性对于同样的数据会缓存。当其依赖属性的值发生变化是这个属性的值会自动更新与之相关的DOM部份也会同步自动更新。其实一般情况我也会把一些关于逻辑的代码都写在computed中。 template 用来设置模板会替换页面元素包括占位符 Vue.component组件中会用到其实很多地方都会用到 watch watch:function(new,old){ … }监听data中数据的变化两个参数一个返回新值一个返回旧值 当你有一些数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时建议使用watch computed和watch是有区别的 watch: 监视,能够监听到数据的变化,只要数据变化的时候,都会自定执行对应的方法,其中可以检测的数据来源分为三部分 data , computed , props computed: 计算属性,存在一个计算缓存的特性,每一次计算之后,只要里面的逻辑不发生变化,每一次重复调用,都会使用上一次执行的结果,能够节省计算的时间 render 创建Virtual Dom
Vue的7种指令
v-text 在元素中插入值v-html 在元素中插入html标签和文本v-if 根据表达式的真假值来动态插入和移除元素v-show 根据表达式的真假值通过控制css的display来隐藏和显示元素v-for 根据变量的值来循环渲染元素v-on 监听元素事件执行相应操作v-bind 绑定元素属性执行相应操作v-model 绑定input值和变量实现数据视图的双向绑定
下面作详细介绍
v-bind
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined那么该 attribute 将会从渲染的元素上移除。
因为 v-bind 非常常用我们提供了特定的简写语法
!-- 与 :idid 相同 --
div :id/div!-- 这也同样有效 --
div v-bind:id/divdiv :iddynamicId/div开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样但它的确是合法的 attribute 名称字符并且所有支持 Vue 的浏览器都能正确解析它。此外他们不会出现在最终渲染的 DOM 中。简写语法是可选的但相信在你了解了它更多的用处后你应该会更喜欢它。
div idappspan v-bind:titlemessage鼠标悬停几秒钟/span
/div鼠标悬停就会显示tittle里面的内容。
v-bind指令的一些注意事项 不能在属性值内直接写入以下语法
h1 :stylefont-size:50px;color:red;this is test/h1这是错误的因为vue会把font-size当成一个data数据
解决方式如下
h1 :stylefont-size:50px;color:red;this is test/h1可以看到只需要在总的样式前后各加上一个 ’ 单引号即可这样他就会把他当作字符串了不过如果我们这么加样式就没有必要写v-bind
判断循环
body
div idtsth1 v-ifoktrue/h1h1 v-elseNO/h1
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
scriptvar vmnew Vue({el: #tst,data: {ok: true}});
/script
/bodybody
div idtsth1 v-iftypeaA/h1h1 v-else-iftypebB/h1h1 v-else-iftypecC/h1h1 v-else-iftypedD/h1h1 v-elseNo/h1
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
scriptvar vmnew Vue({el: #tst,data: {type: a}});
/script
/bodybody
div idtstli v-foritem in items{{item.message}}/li
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
scriptvar vmnew Vue({el: #tst,data: {items: [{message: 吃饭},{message: 睡觉},{message: 厕所},]}});
/script
/bodydiv idtstli v-for(item,index) in items{{item.message}}--{{index}}/li
/div我们也可以在其中定义一个数组让他输出 methods方法
方法必须定义在Vue的method中。
scriptvar vmnew Vue({el:#app,data:{message:Hello Vue},methods:{sayHi:function (event){alert(this.message);}}})
/script在methods中定义一个方法记得添加事件监听event然后
div idappbutton v-on:clicksayHiclick/button
/div定义一个按钮用v-on:click绑定事件最重要的是不要忘了引入标签
html langen xmlns:v-onhttp://www.w3.org/1999/xhtml!DOCTYPE html
html langen xmlns:v-onhttp://www.w3.org/1999/xhtml
headmeta charsetUTF-8titleTitle/title
/head
body
div idappbutton v-on:clicksayHiclick/button
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
scriptvar vmnew Vue({el:#app,data:{message:Hello Vue},methods:{sayHi:function (event){alert(this.message);}}})
/script
/body
/html这样我们就绑定了一个事件。在不确定绑定事件的时候我们可以查看这个网站jQuery API 中文文档 | jQuery中文网
数据双向绑定v-model)
Vue.js是一个MVVM矿建即数据双向绑定当数据发生变化时视图也会发生变化当视图发生变化的时候数据也会跟着同步变化这也算是Vue.js的精髓之处。
我还是喜欢用代码说话大家来体会。这里我们要用到v-model标签。
body
div idapp输入文本:input typetext v-modelmessage{{message}}
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
scriptvar vmnew Vue({el:#app,data:{message:123}})
/script
/body在这里通过v-model把文本框和下面的message绑定到一起。又把message放到文本框后边加入到视图层实现数据的双向绑定。 我们可以操作他。 我们也可以用属性绑定来实现性别选择
body
div idapp选择性别:input typeradio v-modelsex value女 checked女input typeradio v-modelsex value男男/br{{sex}}
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
scriptvar vmnew Vue({el:#app,data:{message:123,sex:}})
/script
/bodybody
div idapp请选择:select v-modelvalueoption disabled--请选择--/optionoptionA/optionoptionB/optionoptionC/option/select{{value}}
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
scriptvar vmnew Vue({el:#app,data:{value:}})
/script
/body注意:v-model会忽略所有表单元素的value、selected、checked的初始值而总是将vue实例的数据作为数据来源。你应该通过JavaScript在组件的数据库中选项中声明初始值!
对于ios用户无法选中第一个选项所以第一个选项要设置为无法选中。
Vue组件(component)
组件允许我们将 UI 划分为独立的、可重用的部分并且可以对每个部分进行单独的思考。在实际应用中组件常常被组织成一个层层嵌套的树状结构 这是官网上的图。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idapptest v-foritem in items v-bind:pojoitem/test
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
script typetext/javascriptVue.component(test,{props: [pojo],template: li{{pojo}}/li});var vm new Vue({el:#app,data:{items: [吃饭,睡觉,上厕所]}});
/script
/body
/html解释
v-for“item in items”遍历Vue实例中定义的名为items的数组并创建同等数量的组件
v-bind:panh“item”将遍历的item项绑定到组件中props定义名为item属性上 号左边的panh为props定义的属性名右边的为item in items 中遍历的item项的值 网络通讯
我们在前面的spingMVC中学习了jQuery.ajax它可以完成异步通讯现在学个新的
Axios 异步通讯
Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架 她的主要作用就是实现AJAX异步通信其功能特点如下
从浏览器中创建XMLHttpRequests从node.js创建http请求支持Promise API[JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF(跨站请求伪造)
GitHubhttps://github.com/axios/axios
中文文档http://www.axios-js.com/ mounted钩子
前后端分离所以我们要先用一个勾子把前端给的数据钩下来再把它放到我们的模板里面我们通过访问模板来映射到视图层
首先写一个json文件
{name: 康王博客,url: https://blog.csdn.net/K1763540?typeblog,page: 1,isNonProfit: true,address: {street: 天安门,city: 北京,country: 中国},links: [{name: CSDN,url: https://www.baidu.com},{name: test,url: https://www.baidu.com},{name: test1,url: https://www.baidu.com}]
}再用一个钩子把数据钩下来。
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
script srchttps://unpkg.com/axios/dist/axios.min.js/script
script typetext/javascriptvar vm new Vue({el:#app,mounted(){axios.get(./exp_07.json).then(response(console.log(response.data)));}});
/script在这里成功钩到了这个json文件。下一步就是把他套在模板里面
script typetext/javascriptvar vm new Vue({el:#app,data(){return{info:{name: null,address: {street: null,city: null,country: null,},link:[]}}},mounted(){axios.get(./exp_07.json).then(response(console.log(response.data)));}});
/script这里改变返回值把数据返回到模板中。
mounted(){axios.get(./exp_07.json).then(response(this.inforesponse.data());
}html langen
body
div idapp{{info.name}}{{info.address}}
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
script srchttps://unpkg.com/axios/dist/axios.min.js/script
script typetext/javascriptvar vm new Vue({el:#app,data(){return{info:{name: null,address: {street: null,city: null,country: null,},link:[]}}},mounted(){axios.get(./exp_07.json).then(response(this.inforesponse.data));}});
/script
/body
/html这样我们就把json的信息渲染到了页面上。但是刚开始没有渲染到的时候会有一个框架就是上面的那个。这样很容易让人以为走错了页面我们对他做一些改进。
headmeta charsetUTF-8titleTitle/titlestyle[v-cloak]{display: none;}/style
/head
body
div idapp v-cloak{{info.name}}{{info.address}}
/div我们对它的样式做一些修改使他在没有获取到json时先不显示。
在这里要注意超链接要使用v-bind绑定一下
a v-bind:hrefinfo.url超链接/a计算属性
计算属性的重点突出在属性两个字上(属性是名词)首先它是个属性其次这个属性有计算的能力(计算是动词)这里的计算就是个函数;简单点说它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)仅此而已;可以想象为缓存。
body
div idappgetTime1:{{getTime1()}}/brgetTime2:{{getTime2}}
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
scriptvar vmnew Vue({el:#app,data:{message:hello world},methods:{getTime1: function () {return Date.now();}},computed:{getTime2: function () {return Date.now();}}})
/script
/body结果 表面上是没有区别的我们在刷新的时候他们也是同步刷新但是 我们对time1也就是methods的方法操作时他后面带有括号说明他是一个方法而getTime2并不会刷新代表他只是一个属性。
这样在运行时可以为我们提升很多效率有助于高并发
methods和computed方法名不能重名methods的优先级高
内容并发
在Vue.js中我们使用 元素作为承载分发内容的出口官方称其为solt这里我们称它为插槽它可以应用在组合组件的场景中;
在某些场景中我们可能想要为子组件传递一些模板片段让子组件在它们的组件中渲染这些片段。
slot 元素是一个插槽出口 (slot outlet)标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 此图源自官方文档插槽 Slots | Vue.js
div idapph2日程/h2ulli吃饭/lili睡觉/lili打喷嚏/li/ul
/div写出来这样一个程序我们有一些网站开发经验的都知道我们很多时候书单里的内容都是需要从后端传递的直接写死是不符合我们的意愿的所以我们要加入插槽动态的改变标签里面的数据。
第一把把这个大的div抽象成一个组件 Vue.component(app_div,{template: div slot/slotul slot/slot/ul/div});也可以用\来代替换行
Vue.component(app_div,{template:div\slot/slot\ul\slot/slot\/ul\/div
});我们这样几把他的标题和内容都抽象成了两个插槽这样我们就可以动态的插入我们的数据。
我们把里面的内容也抽象成组件
Vue.component(app_title,{template:h2日程/h2})Vue.component(app_items,{template:li吃饭/li})var vmnew Vue({el: #app,});把它茶人
body
div idappapp_divapp_title/app_titleapp_items/app_items/app_div
/div
/body这种插入方式不对但是是一个简单的插入操作为的是让我们感受一下这个插入插槽的操作。 下面我们对他进行一些升级
首先把他们插到正确的位置通过name属性来绑定插入的组件。
首先在组件中绑定 Vue.component(app_div,{template:div\slot nameapp_title/slot\ul\slot nameapp_items/slot\/ul\/div});然后在视图层绑定视图层要绑定模板也要绑定数据
模板方面
app_divapp_title slotapp_title/app_titleapp_items slotapp_items/app_items
/app_div数据方面
因为我们要在里面添加元素所以先把组件里面的信息挖空我们再通过v-bind来绑定data里面的数据
Vue.component(app_title,{props:[title],template:h2{{title}}/h2})Vue.component(app_items,{props: [item],template:li{{item}}/li})div idappapp_divapp_title slotapp_title :titletitle/app_titleapp_items slotapp_items/app_items/app_div
/div在下面的data里面添加title就成了。 我们的大标题就插进来了下面把目录里面的东西遍历出来。
app_divapp_title slotapp_title :titletitle/app_titleapp_items slotapp_items v-foritem in Items v-bind:itemitem/app_items
/app_div其实很简单就是用for循环来遍历data中Items的数据然后把遍历得到的item赋值给app_items组件的item属性 最后我们就得到了这样一个看不懂的视图层但是我们真正的关注到了热点小问题。
自定义事件
今天我们要解决的问题说起来其实不难就是删除标签。 简单来说就是这样但是我们的数据是在Vue对象的data里面存储的但是表单定义在了组件当中所以要解决的问题就是在组件中调用一个方法来删除Vue对象中的信息
对组件增加一个methods里面定义一个remove事件。在每个信息后面添加一个按钮尝试调用组件内部定义的事件。
Vue.component(app_items,{props: [item],template: li{{item}} button clickremove删除/button/li,/*是v-on的简写用来绑定事件*/methods: {remove: function () {alert(尝试删除)}}});虽然不能在组件里直接删除Vue对象的数据但是我们可以在Vue对象中删除Vue的data数据。那么我们在vue中定义一个删除方法。
这样要借助js中的splice函数
var vmnew Vue({el: #app,data:{title:日程安排,Items:[吃饭,睡觉,打喷嚏]},methods:{removeItems:function (index) {this.Items.splice(index,1,已删除);}}});尝试一下。 这个事件就定义成功了,但是我们不能在视图层中调用这个方法因为视图层的方法是定义在组件上面的。
修改v-for获取index app_items slotapp_items v-for(item,index) in Items v-bind:itemitem :indexindex/app_items在组件中获取index
props: [item,index],
template: li{{index}}--{{item}} button clickremove删除/button/li,成功获取到index在视图层绑定Vue对象中的方法
app_items slotapp_items v-for(item,index) in Itemsv-bind:itemitem :indexindexv-on:removeremoveItems(index)/app_items此时就涉及到参数传递与事件分发了Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用this. e m i t ( ‘自定义事件名’ , 参数 ) 。 t h i s . emit(‘自定义事件名’,参数)。this. emit(‘自定义事件名’,参数)。this.emit(‘自定义事件名’,参数)在当前组件触发一个自定义事件。任何额外的参数都会传递给事件监听器的回调函数。
Vue.component(app_items,{props: [item,index],template: li{{index}}--{{item}} button clickremove删除/button/li,methods: {remove: function (index) {this.$emit(remove,index);}}});终于实现了这个删除功能。我们来分析一下这个事件分发 自此我们学习了Vue的基本语法如v-on和v-for等。还有网络通信axios最后学习了基本的组件和插槽还有自定义事件分发就可以做一个简单的单页面应用了美中不足的就是现在我们还没有学习请求转发和重定向之类的操作。
