兖州建设局网站,微信头像做国旗网站,南宁老牌网站建设公司,自学室内装修设计教程文章目录 一、插值表达式 {{}}二、Vue 指令2.1 v-text 和 v-html#xff1a;2.2 v-if 和 v-show#xff1a;2.3 v-on#xff1a;2.4 v-bind 和 v-model#xff1a;2.5 v-for#xff1a; 三、生命周期四、Vue 组件库 Element五、Vue 路由 本文章适用于后端人员#xff0c;… 文章目录 一、插值表达式 {{}}二、Vue 指令2.1 v-text 和 v-html2.2 v-if 和 v-show2.3 v-on2.4 v-bind 和 v-model2.5 v-for 三、生命周期四、Vue 组件库 Element五、Vue 路由 本文章适用于后端人员快速了解 vue。
一、插值表达式 {{}}
插值表达式是一种 Vue 的模板语法。
我们可以用插值表达式渲染出 Vue 提供的数据。
表达式是可以被求值的代码JS 引擎会讲其计算出一个结果。
语法
插值表达式语法{{ 表达式 }}
h3{{title}}h3p{{nickName.toUpperCase()}}/pp{{age 18 ? 成年:未成年}}/pp{{obj.name}}/pp{{fn()}}/p错误用法
1.在插值表达式中使用的数据 必须在data中进行了提供
p{{hobby}}/p //如果在data中不存在 则会报错2.支持的是表达式而非语句比如if for ...
p{{if}}/p3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
p title{{username}}我是P标签/p二、Vue 指令
概念指令Directives是 Vue 提供的带有v- 前缀的特殊标签属性。
vue 中的指令按照不同的用途可以分为如下 6 大类
内容渲染指令v-html、v-text条件渲染指令v-show、v-if、v-else、v-else-if事件绑定指令v-on属性绑定指令 v-bind双向绑定指令v-model列表渲染指令v-for
接下来我们需要学习 vue 的常用指令如下表所示
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-else辅助 v- ifv-else-if辅助 v-ifv-show根据条件展示某元素区别在于切换的是display属性的值v-for列表渲染遍历容器的元素或者对象的属性v-text内容渲染v-html内容渲染
在创建 vue 对象时有几个常用的属性 el: 用来指定哪些标签受 Vue 管理。 data: 用来定义数据模型。 methods: 用来定义函数。
2.1 v-text 和 v-html
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 2 个
v-text
使用语法p v-textunamehello/p意思是将 uame 值渲染到 p 标签中会覆盖标签原有内容。
v-html
使用语法p v-htmlintrohello/p意思是将 intro 值渲染到 p 标签中会覆盖标签原有内容。
示例代码
bodydiv idapph2个人信息/h2!-- 既然指令是vue提供的特殊的html属性所以咱们写的时候就当成属性来用即可 --p v-textuname姓名/p p v-htmlintro简介/p/div
/body
scriptconst app new Vue({el:#app,data:{uname:张三,intro:h2这是一个非常优秀的boyh2}})
/script效果如下 2.2 v-if 和 v-show
条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个分别是
v-show
使用语法 v-show “表达式”表达式值为 true 显示 false 隐藏。
v-if
使用语法 v-if “表达式”表达式值 true显示 false 隐藏。
示例代码
bodydiv idappdiv classbox v-showflag1我是v-show控制的盒子flag1/divdiv classbox v-showflag2我是v-show控制的盒子flag2/divdiv classbox v-ifflag1我是v-if控制的盒子flag1/divdiv classbox v-ifflag2我是v-if控制的盒子flag2/div/div
/body
scriptconst app new Vue({el: #app,data: {flag1: false,flag2: true}})
/script效果如下 二者的区别
观察下面这张图片。 可以发现浏览器呈现的效果是一样的但是浏览器中html源码不一样。v-if指令不满足条件的标签代码直接没了而v-show指令中不满足条件的代码依然存在只是添加了css样式来控制标签不去显示。
2.3 v-on
v-on: 用来给 html 标签绑定事件的。需要注意的是如下2点
v-on 语法给标签的事件绑定的函数必须是 vue 对象种声明的函数。v-on 语法绑定事件时事件名相比较 js 中的事件名没有 on。v-on 简写为
例如在 js 中事件绑定 demo 函数。
input onclickdemo()vue 中事件绑定 demo 函数。
input v-on:clickdemo()示例代码
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
效果如下 2.4 v-bind 和 v-model
指令作用v-bind为HTML标签绑定属性值如设置 href , css 样式等v-model在表单元素上创建双向数据绑定
其中 v-bind 可以简写为:
v-model 中双向的含义
vue 对象的 data 属性中的数据变化视图展示会一起变化。
视图数据发生变化vue 对象的 data 属性中的数据也会随着变化。
双向绑定的作用可以获取表单的数据的值然后提交给服务器。
示例代码如下
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效果如下
如果对输入框里面的值进行修改那么链接1和链接2就会访问到相应的网址。 2.5 v-for
v-for: 从名字我们就能看出这个指令是用来遍历的。其语法格式如下
标签 v-for变量名 in 集合模型数据{{变量名}}
/标签有时我们遍历时需要使用索引那么 v-for 指令遍历的语法格式如下
标签 v-for(变量名,索引变量) in 集合模型数据!--索引变量是从0开始所以要表示序号的话需要手动的加1--{{索引变量 1}} {{变量名}}
/标签示例代码如下
bodydiv idappulli v-for(item, index) in booksList :keyitem.idspan{{ item.name }}/spanspan{{ item.author }}/spanbutton clickdel(item.id)删除/button/li/ul/div/body
scriptconst app new Vue({el: #app,data: {booksList: [{ id: 1, name: 《红楼梦》, author: 曹雪芹 },{ id: 2, name: 《西游记》, author: 吴承恩 },{ id: 3, name: 《水浒传》, author: 施耐庵 },{ id: 4, name: 《三国演义》, author: 罗贯中 }]}})
/script效果如下 v-for 中的 key
语法 key“唯一值”。
作用给列表项添加的唯一标识。便于 Vue 进行列表项的正确排序复用。
为什么加keyVue 的默认行会尝试原地修改元素就地复用。
注意
key 的值只能是字符串或数字类型。key 的值必须具有唯一性。推荐使用 id 作为 key唯一不推荐使用 index 作为 key会变化不对应。
三、生命周期
vue 的生命周期指的是 vue 对象从创建到销毁的过程。vue 的生命周期包含 8 个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示
状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数 其中我们后端程序员需要重点关注的是 mounted, 其他的我们了解即可。
mounted挂载完成Vue初始化成功HTML页面渲染成功。
示例代码如下
bodydiv idapp/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {},mounted () {alert(vue挂载完成,发送请求到服务端)}})
/script效果如下 四、Vue 组件库 Element
Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。
Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等。 ElementUI 的学习方式和我们之前的学习方式不太一样对于 ElementUI我们作为一个后台开发者只需要 学会如何从 ElementUI的官网拷贝组件到我们自己的页面中并且做一些修改即可。
其官网地址一个 Vue 3 UI 框架 | Element Plus
五、Vue 路由
Vue 中的路由路径#号之后的内容和组件的映射关系。 插件 VueRouter 的使用
官网如下https://v3.router.vuejs.org/zh/
一共 7 个步骤5 个固定步骤 2 个核心步骤。
固定5个固定的步骤不用死背熟能生巧 下载 VueRouter 模块到当前工程版本 3.6.5 yarn add vue-router3.6.5main.js 中引入 VueRouter import VueRouter from vue-router安装注册 Vue.use(VueRouter)创建路由对象 const router new VueRouter()注入将路由对象注入到 new Vue 实例中建立关联 new Vue({render: h h(App),router:router
}).$mount(#app)当我们配置完以上 5 步之后就可以看到浏览器地址栏中的路由变成了/#/的形式。表示项目的路由已经被 Vue-Router 管理了。 代码示例
// 路由的使用步骤 5 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中建立关联import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化const router new VueRouter()new Vue({render: h h(App),router
}).$mount(#app)两个核心步骤
创建需要的组件views目录配置路由规则 配置导航配置路由出口路径匹配的组件显示的位置
div classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a
/div
div classtop!-- 匹配的组件所展示的位置 --router-view/router-view
/div结语 其实写博客不仅仅是为了教大家同时这也有利于我巩固知识点和做一个学习的总结由于作者水平有限对文章有任何问题还请指出非常感谢。如果大家有所收获的话还请不要吝啬你们的点赞收藏和关注这可以激励我写出更加优秀的文章。
