程序员必知的网站,做网站站长开通vip,专门做物业催收的网站,双拥网站建设申请基本介绍
vue是什么 目标#xff1a;了解vue的一些基础概念。 官方网站#xff1a; https://cn.vuejs.org/
vue是#xff1a;渐进式javascript框架。
两组概念
#xff08;1#xff09;框架
库。只提供一些API给开发者使用。jquery 是一个js库框架。拥有自己的规则和…基本介绍
vue是什么 目标了解vue的一些基础概念。 官方网站 https://cn.vuejs.org/
vue是渐进式javascript框架。
两组概念
1框架
库。只提供一些API给开发者使用。jquery 是一个js库框架。拥有自己的规则和元素它比库要更加强大一些。 UI框架 - bootstrap。包含 js html css 主要实现了一套支撑网站开发的常用控件对话框弹出框tab页签…JS框架 - 纯js编写提供了开发网站功能的标准规则约定开发规则通过这些规则组织你的功能代码。
2渐进式 它可以很简单帮助确保最快上手最快使用它也可以很复杂配合不同的工具在各种复杂的应用场合下工作。 上得厅堂下得厨房 文可提笔安天下武可上马定江山 能做什么
充当模板引擎渲染数据制作网页 网页上的四个要素 结构 — html样式 — css行为 — js数据 — 后端接口返回的json数据 通过脚手架工具开发单页应用。直接用它来开发网站在其它框架下开发微信小程序或者跨端跨平台应用
小结啥都能做
安装vue
在不同的学习阶段有不同的使用方式: 基础阶段直接当做一个普通的js库来引入使用与jquery类似 本地方式 先下载https://cn.vuejs.org/js/vue.js然后在你的.html文件中引入script src./vue.js/script 直接引入公网中的js 引入 script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script 项目阶段以npm包的方式来引入 安装 npm i vue导入后使用即可
总结在基础学习阶段使用本地下载引入的方式或者公网中的js均可。
体验vue
第一个vue程序。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 2. 视图 --div idapph3{{msg}}/h3input v-modelmsg typetext/div!-- 引入VUE核心js文件 --script src./vue.js/script!-- 功能代码 --script// 需要把数据渲染到页面上// 页面上输入的内容收集到数据中// 2. 控制数据模型和视图管理者const vm new Vue({el: #app,// 1. 数据模型data: {msg: hi vue}})/script
/body
/html安装live-server插件
在我们写一些页面功能时如果希望实时观察到效果可以安装这个插件。(与学习vue无关)
功能说明
它是一个vscode的插件它会监听代码的改动一旦我们修改了代码它会立即刷新网页。
安装过程 使用步骤
使用vscode打开某个文件夹 不是打开单个文件打开某个.html文件上右键在弹出的菜单上选择open with live server 此时它会自动调起浏览器并打开我们当前选择的.html文件。
补充
另一种打开方式
在当前的.html打开时在vscode的状态栏上找到liver-server 的图标点击一次。
更友好的工作模式
在你的电脑屏幕上同时打开vscode和浏览器一边写代码一看效果。 vue的特点
声明式渲染
允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
div idapp{{ message }}
/div数据驱动视图
在vue中通过修改数据即可更新视图页面大大解放了操作dom的时间把精力放在业务上。 所以我们在写vue代码时会更加关心数据的构成。
双向数据绑定
vue是一个典型的 MVVM 思想的框架
M 是数据模型 modelV 是视图界面viewVM 是控制数据模型和视图的管理者
把上面的代码可以拆分成M V VM 结构。 数据可以影响视图变化视图变化也会影响数据变化。
组件化开发 把一个网站功能分割若干个组件相同类型的组件可复用组件功能是独立的可维护性高。
vue实例和它的三大件 el data methods
vue实例
const vm new Vue({el: ,data: ,methods: ,
})理解
Vue(V是大写的)是一个构造器用它来创建vue实例。vm就是创建出来的实例对象这个构造器只有一个参数这个参数是一个对象其中的属性名和属性值都有特定的含义。
el选项
el选项用来指定vue实例管理的容器。
body{{msg}}div idapp{{msg}}!-- 被管理的容器才可以使用vue提供的功能 --/divscript src./vue.js/scriptscript// 初始化vue实例vue实例就是vm的意思const vm new Vue({// 初始化的配置对象里面有很多选项// el element 元素标签容器// el指定当前vue实例管理的容器是谁。// 值是选择器 | dom元素// el: #app,// el: document.querySelector(#app),// Do not mount Vue to html or body - mount to normal elements instead.// el不能指定 html 和 body 容器el: body,data: {msg: hi vue}})/script
/body
/html要点
可以是选择器也可以是某个dom元素只能是普通的domdiv,p不能是 html,body 容器不在此容器内的部分不会受到vue实例影响
data选项
作用它是一个对象它用来规定数据。
div idapph3理解data/h3p姓名{{name}}/pp爱好1{{aihao[0]}}/pp爱好2{{aihao[1]}}/pulliQQ:{{lianxi.QQ}}/liliemail:{{lianxi.email}}/liliweixin:{{lianxi.weixin}}/li/ul/divscript// data: 它是一个对象用来规定数据。// 现在是把vue当作一个模板引擎来使用。// 它的作用是把数据显示在页面上。data就是用来// 约定数据的。// 在后面的学习的这个部分的数据会是// 从ajax接口中获取到的// 访问数据// 方法一在视图中通过{{}}插值表达式 直接访问。/// 不要写data.XXX - 不要写data - 不要写data// 方法二通过Vue实例vm来访问// vm.XXXconst vm new Vue({el: #app,// el: document.getElementById(app),data: {name: 凡哥-凡叔,aihao:[听音乐,读书],lianxi: {QQ:123456,email:xxxxxx,weixin:yyyyyy}}})console.log(vm)console.log(vm.name)console.log(vm.aihao[1])console.log(vm.lianxi.QQ)/script访问方式
通过实例可以直接访问data中的数据 vm.msg在模板中使用数据的字段名称即可。{{msg}}
注意
在data中显性声明的数据都是响应式数据可以数据驱动视图。在模板中使用的数据建议在data中提前声明即使没有值也需要声明。
methods选项 目标知道vue选项中methods选项的使用方法和注意事项。 作用为vue实例提供自定义函数的大白话自己的业务函数书写位置
调用方法
vue实例直接调用且函数的this指向就是vue实例就是vm在vue实例管理的模板管理的容器|视图中使用这些函数
// Vue构造器中的参数是一个对象它有很多的属性// el,// data// methods// ... 还有好多好多....// methods 是一个对象// 在对象中正常定义函数// (1) 定义函数// (2) 调用函数// 1. 通过vm实例来调用// 2. 也可以在页面上通过{{函数名}}来调用 --不推荐--// 3. 当做事件的回调函数来使用。const vm new Vue({el: #app,data: {name: 凡哥-凡叔},methods: {// 定义函数// 函数用来做你自己业务逻辑// 方法1changeName1: function() {console.log(changeName1)this.name 小凡1},// 方法2推荐// es6中支持对对象中的方法的简写changeName2 () {console.log(changeName2)console.log(this vm)this.name 小凡2},// 方法3箭头函数。// 其中的this是有问题// 这里的this指向的是window而不是vm实例// 所以不能使用this来操作数据。changeName3: () {console.log(changeName3)console.log(this)this.name 小凡3}}})// console.log(vm)// vm.changeName2()// vm.changeName1()注意
书写函数有很多方式
普通的写法es6简写格式 推荐使用有箭头函数 不使用。因为其中的this不指向vue实例
在函数的内部不是箭头函数的情况
this会指向vue实例。
插值表达式 目标了解vue术语插值表达式是什么和使用场景。 在vue中{{ }}语法叫做插值表达式大白话就是输出值的语法。
在插值表达式中可以写
写data数据字段名称写methods函数的名称进行调用对data数据字段进行表达式运算 加减运算三元运算…
不能写
js语句声明变量分支循环访问在vue实例之外自定义的全局变量
div idapph3理解插值表达式/h3p姓名{{name}}/p!-- 字符串的拼接 --p{{name 你好}}/p!-- 算术运算 --p{{num/5}}/pp{{num 90 ? A:不是A}}/ppmethod{{test1()}}/p!-- 不能声明变量 --!-- {{var a 1}} --!-- 不能写分支 --!-- {{ if(true) {} }} --!-- 不能访问除了vm实例中声明的数据 --!-- {{num123}} --/divscript// 插值表达式 {{}}// 作用输出值把数据渲染到页面// {{}} 中可以写什么// 1. data数据字段名// 2. methods函数名称进行调用// 3. data数据字段进行表达式运算// 算术// 字符串拼接// 三元// {{}} 不可以写什么// 1. 不能写js语句声明变量分支循环.....// 2. 不能访问除了vm实例中声明的数据// [Vue warn]: Property or method num123 is not // defined on the instance(实例) but referenced(引用) // during rendervar num123 100const vm new Vue({el: #app,data: {name: vue,num: 80},methods: {test1 () {console.log(test1)}}})/script指令
指令directive其实就是一个以v-开头的标签属性例如v-model 双向绑定指令。
vue提供了一些指令这些指令都是以v-开头他们可以扩展标签的原有功能。这些指令的值可以是js表达式当关联js表达式依赖的数据发生变化对应的指令就会产生作用。
扩展功能
输入框双向绑定标签的显示隐藏标签显示的内容…
学习vue主要就是要学习两个地方的内容
Vue实例vue实例与三大件模板视图中的规则插件表达式指令
v-text和v-html 目标能够使用v-text和v-html去更新标签内容。 这组指令作用
更新标签的内容根据数据进行更新
具体的作用
v-text 更新标签的内容格式是文本和 innerText 相似。v-html 更新标签的内容格式是html和 innerHTML 相似。
在代码中体验
div idapph3v-html,v-text/h3!-- {{}}可以用来设置标签中的部分内容 --p学习内容{{str}}/pp{{str}}/p!-- v-text:设置标签中的 全部内容 --p v-textstr/p!-- v-text:设置标签中的 如果这里内容是html字符串它会转义一下只是显示字符串而不会显示成对应的dom结构 --div v-textstrHtml/div!-- v-html用来设置标签中的内容。与v-text不同它直接解析其中的html结构并渲染 --div v-htmlstrHtml/div/divscript// v-text : innerText// v-html : innerHTMLconst vm new Vue({el: #app,data: {str: vue,// 有时从后端取回来的数据是一个html字符串。// 例如获取文章详情取回来就是一html字符串。strHtml: h1vue/h1}})/script总结
v-text 更新 纯文本v-html 更新 html内容
v-show和v-if
功能
能够使用v-show和v-if去控制标签的显示隐藏。
格式
元素 v-show布尔值/元素
元素 v-if布尔值/元素这对指令的共同点都能控制元素的是否可见
这对指令的不同点
v-show是通过 display:none来控制隐藏v-if 是通过动态创建和移除元素。
示例
div idapph3v-if,v-show/h3div v-ifisVisiable我是通过v-if来控制是否可见/divdiv v-showisVisiable我是通过v-show来控制是否可见/div/divscript// 作用控制标签的可见与不可见// 格式// 元素 v-show布尔值/元素// 元素 v-if布尔值/元素// 如果是false,则不可见如果是true则可见// 区别// 对于v-if,如果为false,则在页面根本就不生成这个dom。// 所以不可见。// 对于v-show,如果为false,则在页面有这个domdisplay:none。// 所以不可见。const vm new Vue({el: #app,data: {isVisiable: false}})setInterval(function() {vm.isVisiable !vm.isVisiable},5000)/script总结区分下使用场景
v-show 性能较好对应需要频繁切换显示与隐藏的功能可以使用v-show。v-if 减少标签状态切换次数少的时候使用使用v-if
v-on
功能
v-on指令的作用是指令监听 DOM 事件并在触发时运行一些 JavaScript 代码。
格式
三种使用格式
# 格式一把要执行的代码直接写在内部。适合少量代码
标签 v-on:事件名要执行的代码/标签
# 格式二指向methods中的定义的函数
标签 v-on:事件名methods中的函数/标签
# 格式二指向methods中的定义的函数并传入参数
标签 v-on:事件名methods中的函数(实参)/标签说明
能支持所有原生事件名所有的原生js事件v-on可以简写成
示例
div idapph3v-on/h3div v-showisVisiable内容/div!-- 格式一把要执行的代码直接写在内部。适合少量代码 --button v-on:clickisVisiabletrue显示内容/buttonbutton v-on:clickisVisiablefalse隐藏内容/button!-- 格式二指向methods中的定义的函数 --!-- 加与不加()一样v-on:clickf1() 与 v-on:clickf1 --button v-on:clickf1调用methods中的函数/button
br!-- 格式三指向methods中的定义的函数 --!-- 注意1. 如果要传入参数则必须要加()2. 如果传入当前这个事件的事件对象则传入固定名字 $event --button v-on:clickf2(10)调用methods中的函数传入10/buttonbrbutton v-on:clickf3(11,$event)调用methods中的函数传入11,传入事件对象/button/divscript// 功能 v-on 用来监听事件// 格式// 格式一把要执行的代码直接写在内部。适合少量代码// 标签 v-on:事件名要执行的代码/标签// 事件名就是所有的dom原生事件 // click,input,mouseenter,blur,......// 格式二指向methods中的定义的函数// 标签 v-on:事件名methods中的函数/标签// 格式三指向methods中的定义的函数并传入参数// 标签 v-on:事件名methods中的函数(实参)/标签const vm new Vue({el: #app,data: {isVisiable: false},methods: {f1 () {console.log(f1被调用)alert(1)this.isVisiable true},f2 (m) {alert(m)console.log(m)},// 形参名m,eventObj。这两名是可以自己定义的。f3 (m, eventObj) {console.log(m, eventObj)}}})/script总结绑定函数的时候带不带括号
如果你需要接受事件触发的默认传参不带括号如果你需要自己来进行传参需要带括号自己传实参如果什么参数都不要带不带无所谓
案例-折叠面板 用v-on和v-show实现折叠面板
div idapph2案例折叠面板/h2div classboxdiv classtitle h4我是标题/h4span classbtn clickisOpen!isOpen{{isOpen ? 收起 : 展开}} /span /divdiv classcontainer v-showisOpen我是内容br我是内容/div/div
/div
scriptvar vm new Vue({el: #app,data: {isOpen: false}})
/script补充-修饰符
div idapph3v-on 修饰符/h3div v-on:clickhClickDivdivbutton clickhClickBtn按钮/buttonbrbutton v-on:click.stophClickBtn点击按钮不会冒泡/buttonbra hrefhttp://www.baidu.com v-on:clickhClickA百度/abra hrefhttp://www.baidu.com v-on:click.preventhClickA不跳转百度/abra hrefhttp://www.baidu.com v-on:click.prevent.stophClickA不跳转百度不冒泡/a/div /divscript// vue中的事件也有冒泡机制。// 在子元素上的点击事件也会触发父元素上的点击事件。// 如果要阻止冒泡只需给事件添加个修饰符.stop// 格式 事件名.stop// 示例click.stop// 如果要阻止默认行为只需给事件添加个修饰符.prevent// 格式 事件名.prevent// 示例click.prevent// 如果需要也可以一起使用相当于两个效果叠加// 格式 事件名.prevent.stop// 示例click.prevent.stop// v-on: ----简写成--- const vm new Vue({el: #app,methods: {hClickDiv () {console.log(hClickDiv)},hClickBtn (){console.log(hClickBtn)},hClickA () {console.log(hClickA)}}})/scriptv-for 列表渲染
功能
快速批量生成列表结构
格式
格式1完整格式
元素 v-for(遍历变量索引变量) in 可遍历的数据项 :key唯一的id/元素格式2简写格式
在完整格式的基础上可以省略 :key 和 索引变量。
元素 v-for遍历变量 in 可遍历的数据项/元素遍历目标
对于v-for指令可遍历的数据项可以是
数组对象数值
代码
div idapph2v-for/h2div classboxh41. 对数组进行遍历/h4ulli v-for(item,idx) in hobbies{{idx}} - {{item}}/li/ul/divdiv classboxh42. 对对象进行遍历/h4span v-for(item,prop,idx) in info{{idx}}-{{prop}}-{{item}}/span/divdiv classboxh43. 对数值进行遍历/h4span v-foritem in 10{{item}}/span/div
/div
script src./vue.js/script
scriptvar vm new Vue({el: #app,data: {info: {name: 小张, age: 18, height: 150},hobbies: [唱歌, 跳舞, 打篮球]}})
/script使用了v-for指令的元素在其内部可以通过插值表达式来访问遍历变量和循环变量。
v-bind
作用
动态绑定标签上的属性的值。标签上的属性不能使用插值表达式来设置。
例如如何动态设置img的内容
格式
元素 v-bind:属性名1值1 v-bind:属性名2值3/元素v-bind指令有简写用法 : 冒号例如
img :srcdata数据演示代码
div idapph3v-bind/h3!-- 如果去修改src属性 --!-- img altse srchttp://img3m8.ddimg.cn/93/1/61888458-1_b_2.jpg --img altse :srcimgSrc :titletitlebrimg altse v-bind:srcimgSrc v-bind:titletitlebutton v-on:clickhClick改成11/button/divscript// 作用 动态绑定标签上的属性的值// 格式 :// 元素 v-bind:属性名1值1 v-bind:属性名2值2/元素// 简写// v-bind: ----简写--- :const vm new Vue({el: #app,data: {title: se,imgSrc: http://img3m8.ddimg.cn/93/1/61888458-1_b_2.jpg},methods: {hClick () {// 设为 11this.title 11不香吗this.imgSrc http://img3m0.ddimg.cn/83/24/61887260-1_b_1.jpg}}})/script练习题
如下两种写法的区别是什么
div idmyId/div
div :idmyId/div案例购物车
素材代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh4,p {margin: 0;font-weight: normal;}a{text-decoration: none;}body{background-color: #eee;}#app{background-color:#fff;width: 900px;margin: 50px auto;text-align: center;box-shadow: 3px 3px 3px rgba(0 , 0, 0, 0.5);padding:1em 2em;}.list {padding: 1em;width: 100%;box-sizing: border-box;display: flex;flex-wrap:wrap;}.book {position: relative;flex-basis: 22%;margin-right:2%;margin-bottom:1em;text-align: center;background-color: #fff;padding: 1em 0;transition: all .2s linear;}.book:hover {box-shadow: 0 15px 30px rgba(0, 0, 0, .1);transform: translate3d(0, -2px, 0);}.title {line-height: 2em;margin: 0;padding: 0;}.figure img {width: 150px;height: 150px;}.desc {margin: 0;font-size: 16px;}.price {margin: 0;font-size: 14px;}.btn {cursor: pointer;position: absolute;right: 0.8em;top: 0.8em;border: none;color: #ff6700;padding: .5em .5em;font-size: 12px;}.btn:active {border: none;}.btn:hover {background-color: #ff6700;color: #fff}.cart {border: 1px solid #eee;background-color: #fff;text-align: center;position: fixed;padding: 1em;right: 100px;top: 200px;}/style
/headbodydiv idapph3我的购物车/h3div classlistdiv classbook title当你学会独处a hrefdiv classfigureimg srchttp://img3m8.ddimg.cn/70/15/28522168-1_l_3.jpg alt当你学会独处学会独处学会与自己谈话/divh4 classtitle title当你学会独处当你学会独处/h4p classdesc/pp classpricespan classnum29.9/span/p/abutton classbtn title移出购物车-/button/divdiv classbook titleJavaScript高级程序设计a hrefdiv classfigureimg srchttp://img3m3.ddimg.cn/2/21/22628333-1_b_2.jpgalt JavaScript高级程序设计/divh4 classtitle titleJavaScript高级程序设计JavaScript高级程序设计/h4p classdesc/pp classpricespan classnum78/span/p/abutton classbtn title移出购物车-/button/divdiv classbook title断舍离a hrefdiv classfigureimg alt断舍离 srchttp://img3m3.ddimg.cn/68/20/23271503-1_l_10.jpgtitle断舍离/divh4 classtitle title断舍离断舍离/h4p classdesc/pp classpricespan classnum29.9/span/p/abutton classbtn title移出购物车-/button/divdiv classbook title王子与贫儿a hrefdiv classfigureimg srchttp://img3m0.ddimg.cn/67/20/28535530-1_l_3.jpgalt王子与贫儿/divh4 classtitle title王子与贫儿王子与贫儿/h4p classdesc/pp classpricespan classnum39.9/span/p/abutton classbtn title移出购物车-/button/divdiv classbook title高效能人士的七个习惯a hrefdiv classfigureimg srchttp://img3m2.ddimg.cn/3/4/25253022-1_b_11.jpgalt高效能人士的七个习惯/divh4 classtitle title高效能人士的七个习惯高效能人士的七个习惯/h4p classdesc/pp classpricespan classnum59.3/span/p/abutton classbtn title移出购物车-/button/div/div/divscriptvar bookList [{name: 当你学会独处,price: 29.9,picSrc: http://img3m8.ddimg.cn/70/15/28522168-1_l_3.jpg},{name: JavaScript高级程序设计,price: 78,picSrc: http://img3m3.ddimg.cn/2/21/22628333-1_b_2.jpg},{name: 断舍离,price: 29.9,picSrc: http://img3m3.ddimg.cn/68/20/23271503-1_l_10.jpg},{name: 王子与贫儿,price: 39.9,picSrc: http://img3m0.ddimg.cn/67/20/28535530-1_l_3.jpg},{name: 高效能人士的七个习惯,price: 59.3,picSrc: http://img3m2.ddimg.cn/3/4/25253022-1_b_11.jpg}]/script
/body/html基本实现 v-for循环生成dom结构 :src,:title,:alt 绑定属性 v-on:click绑定点击
