织梦教育网站开发,电子商务的建站流程,网络建设方案的调研照片,h5网站开发框架✨✨ 欢迎大家来到景天科技苑✨✨
#x1f388;#x1f388; 养成好习惯#xff0c;先赞后看哦~#x1f388;#x1f388;
所属的专栏#xff1a;前端零基础教学#xff0c;实战进阶 景天的主页#xff1a;景天科技苑 文章目录 Vuevue.js库的基本使用vue.js的M-V-VM思…
✨✨ 欢迎大家来到景天科技苑✨✨ 养成好习惯先赞后看哦~
所属的专栏前端零基础教学实战进阶 景天的主页景天科技苑 文章目录 Vuevue.js库的基本使用vue.js的M-V-VM思想Vue指令系统的常用指令 Vue
Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型可以高效地开发用户界面。无论是简单还是复杂的界面Vue 都可以胜任。 Vue是一个独立的社区驱动的项目它是由尤雨溪在2014年作为其个人项目创建 是一个成熟的、经历了无数实战考验的框架它是目前生产环境中使用最广泛的JavaScript框架之一可以轻松处理大多数web应用的场景并且几乎不需要手动优化并且Vue完全有能力处理大规模的应用。
vue.js库的下载 vue.js是目前前端web开发最流行的工具库
官方文档 有开发版本有生产版本
它就是个js跟jquery使用方式类似
可以通过cdn给的网址把代码下载到本地使用
vue.js目前有1.x、2.x和3.x 版本我们学习2.x版本的。2.x到3.x是平滑过渡的也就是说你之前用2.x写的代码用3.x的版本的vue.js也是没问题的。
MVVM模型 M数据操作 V视图 把html标签称为视图 VM数据驱动视图的核心功能自动把数据驱动到视图中去生成
vue.js库的基本使用
在github下载https://github.com/vuejs/vue/releases
vue的引入类似于jQuery开发中可以使用开发版本vue.js产品上线要换成vue.min.js。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlescript srcjs/vue.min.js/script/head
body
div idapp!-- {{ message }} 表示把vue对象里面data属性中的对应数据输出到页面中 --!-- 在双标签中显示数据要通过{{ }}来完成 --p{{ message }}/p
/div
/bodyscript// vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。let vm new Vue({el:#app, // 设置当前vue对象要控制的标签范围。// data属性写法方式1data:{ // data是将要展示到HTML标签元素中的数据。message: hello world!,}// 方式2// data:function () {// return {// msg:掀起你的盖头来1// }// }// 方式3data(){ // 单体模式 这种写法用的居多并且后面学习中有个地方一定要这样写所以我们就记下来这种写法就可以了return {msg:掀起你的盖头来2,}}});/script
/html由于不需要后端框架我们可以用pycharm新建个python的项目
将vue的代码拷贝过来新建个js文件
在html中引入vue代码
使用方法
浏览器查看可以看到h标签的内容就是通过msg变量传递过来的
MVVM模型过程
data 属性有好几种写法还一种写法是以函数形式return返回数据。这种方法最常用。因为模块化开发中定义了vue的组件必须这样写
单体模式
// 首先先实例化一个vue对象里面传一些参数
let vm new Vue({el:#app, // 此时表示通过vue语法来控制id为app的标签在这个标签范围内可以使用vue语法//通过data属性来接收后端的数据来展示到前端// data:{// msg:aa, //比如从后端获取到aa这个值//// }//可以单体模式省略functiondata:function (){return {msg:hello word,}}})el:圈地划地盘设置vue可以操作的html内容范围值就是css的id选择器,其他选择器也可以但是多用id选择器。 data: 保存vue.js中要显示到html页面的数据。
渲染数据的时候使用{{}}跟Django模板渲染有点像方便做前后端分离项目
vue中的变量可以直接进行一些简单直接的js操作
div idapp!-- vue的模板语法和django的模板语法类似 --h2{{ msg }}/h2 !-- 放一个变量会到data属性中去找对应的值 --!-- 有人说我们直接这样写数据不就行吗但是你注意我们将来的数据都是从后端动态取出来的不能写死这些数据啊你说对不对 --h2{{ hello beautiful girl! }}/h2 !-- 直接放一个字符串 --h2{{ num1 }}/h2 !-- 四则运算 --h2{{ 21 }}/h2 !-- 四则运算 --h2{{ {name:chao} }}/h2 !-- 直接放一个自定义对象 --h2{{ person.name }}/h2 !-- 下面data属性里面的person属性中的name属性的值 --h2{{ 12?真的:假的 }}/h2 !-- js的三元运算 --h2{{ msg2.split().reverse().join() }}/h2 !-- 字符串反转 --查看vm对象的成员 取属性都要加$ 调数据属性不用$
在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据 console.log(vm.KaTeX parse error: Expected EOF, got # at position 9: el) #̲ #box vm对象可以控制…data); # vm对象要显示到页面中的数据 console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.
vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写它是一种基于前端开发的架构模式。
Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
View 指代的就是vue中数据要显示的HTML页面在vue中也称之为“视图模板” 。
ViewModel 指代的是vue.js中我们编写代码时的vm对象了它是vue.js的核心负责连接 View 和 Model保证视图和数据的一致性通过双向数据绑定来实现视图与模型的自动同步的. 所以前面代码中data里面的数据被显示中p标签中就是vm对象自动完成的。
Vue指令系统的常用指令
在jquery中我们有很多标签操作方法找标签获取标签生成标签在标签里面塞文本等等。这些现在都可以用vue的指令系统来实现 指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。 在vue中提供了很多指令常用的有v-html、v-text、v-if、v-model、v-for等等。
v-text 以文本字符串方式显示 我们在M模块设置的变量。到V那里展示默认是以字符串方式展示
使用v-text方式也是以字符串方式展示v-text 属性名。它和{{}}做的事情是一样的
如果想把v-text放到 其他标签中直接加进去就可以
里面可以用js的语法
v-html 如果M那里是html标签想展示成标签效果可以使用v-html
就展示成了a链接效果
v-if 和v-show vue中提供了两个指令可以用于判断是否要 显示元素分别是v-if和v-show。
!-- 这里表示num如果大于20浏览器就展示a链接否则不显示。根据判断的布尔结果值来判断--a hrefhttp://www.baidu.com v-ifnum 20百度/a现在啥也没显示
把num的值改为21浏览器就展示了a链接
可以结合v-else-if v-else 把num的值改为20
数据一旦发生变化视图就会自动发生变化这就是数据驱动视图,以后视图的效果都是通过数据来控制的 动态生成和动态添加页面需要渲染页面渲染开销大效率比较低所以频繁的显示不显示使用动态的隐藏和展示v-show
v-show
标签元素h1 v-showokHello!/h1data数据data:{ok:false // true则是显示false是隐藏}满足条件就显示不满足就隐藏
把num的值改为9
看到标签display:none 被隐藏并不是删除
v-show可以直接等于布尔值决定显示还是隐藏
简单总结v-if和v-show
v-show后面不能v-else或者v-else-if
v-show隐藏元素时使用的是display:none来隐藏的而v-if是直接从HTML文档中移除元素[DOM操作中的remove]
v-if 也是惰性的如果在初始渲染时条件为假则什么也不做——直到条件第一次变为真时才会开始渲染条件块。
相比之下v-show 就简单得多——不管初始条件是什么元素总是会被渲染并且只是简单地基于 CSS 进行切换。
一般来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要非常频繁地切换则使用 v-show 较好如果在运行时条件很少改变则使用 v-if 较好。
操作属性v-bind
做动态标签属性
格式
标签名 :标签属性data属性/标签名
!-- v-bind:动态的标签属性控制简写: --显示wifi密码效果配合v-on事件绑定
v-on 绑定事件 v-on:事件名称 ‘函数’ 简写 事件名称 ‘函数’
语法button v-on:clickshowp{{msg}}/button
可以简写button clickshowp{{msg}}/button !-- v-on:事件名称简写 事件名称 --div idapp !-- input :typettbutton v-on:clickshow{{msg}}/button--input :typettbutton clickshow{{msg}}/button/divscript srcvue.js/script
!--另起一个script标签来写我们的js--
script// 首先先实例化一个vue对象里面传一些参数let vm new Vue({el:#app, // 此时表示通过vue语法来控制id为app的标签在这个标签范围内可以使用vue语法css的选择器都可以用//可以单体模式省略functiondata(){return {// xxattr:ss,tt:password,msg:显示密码}},//methods里面写方法使用单体模式methods里面的方法this指的就是vue对象methods:{show(){if (this.tt password){this.tt text;this.msg 隐藏密码;}else {this.tt password;this.msg 显示密码;}}}})/scriptv-on 也可以直接操作数据进行js运算
v-on控制数据属性的方式
button v-on:clicknum按钮/button !-- v-on 是vue1.x版本的写法 --
button clicknum5按钮2/button1. 使用事件名来进行事件的绑定语法h1 clicknum{{num}}/h12. 绑定的事件的事件名全部都是js的事件名submit --- onsubmitfocus --- onfocus商品动态加减示例
div idapp button clicknum11/buttoninput typetext :valuenumbutton clicknum-1-1/button/div如果不控制可以减到负数所以通过方法控制下。遇到复杂的逻辑处理时要给指定各方法做
script// 首先先实例化一个vue对象里面传一些参数let vm new Vue({el:#app, // 此时表示通过vue语法来控制id为app的标签在这个标签范围内可以使用vue语法//可以单体模式省略functiondata(){return {num: 10}},//里面写方法methods:{jian() {if (this.num 0) {this.num - 1}}}})/scriptv-model双向数据绑定 v-model数据双向绑定实现改一个标签的数据其他标签使用相同属性的字段也同步被修改 代表着这些标签value的属性值所以取值更快捷了 凡是用户输入数据的地方都可以使用 input select textarea等都可以使用 修改input标签value的值vue中的data属性值也会发生变化 修改vue中的data属性值input标签value的值也会发生变化 双向绑定的双向变化
使用v-model时如果是用中文输入法输入中文一般在没有选定词组前也就是拼音阶段Vue是不会更新数据的当敲下汉字时才会触发更新。如果希望总是实时更新可以使用input代替v-model
单选按钮上使用 单选按钮在单独使用时不需要v-model直接使用v-bind绑定一个布尔类型的值为真时选中为否时不选。
好了本章先讲到这里相信到这里很多小伙伴已经掌握到了vue的一些基本用法后续我们还会持续更新vue更多更高阶的用法感兴趣的朋友不妨点赞关注后面继续体验vue的强大。
