哪个网站可以免费建站,网站logo怎么做才清晰,网站开发职业总结,旅游主题网站策划书文章目录 Vue知识1. Vue 概述2. Vue 代码格式3. Vue 指令3.1 v-bind v-model3.2 v-on3.3 v-if和v-show3.4 v-for 4. 生命周期 Vue知识
1. Vue 概述 简介#xff1a; Vue.js#xff08;读音 /vjuː/, 类似于 view#xff09; 是一套构建用户界面的 渐进式框架。与其他… 文章目录 Vue知识1. Vue 概述2. Vue 代码格式3. Vue 指令3.1 v-bind v-model3.2 v-on3.3 v-if和v-show3.4 v-for 4. 生命周期 Vue知识
1. Vue 概述 简介 Vue.js读音 /vjuː/, 类似于 view 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 原理 MVVM:其实是Model-View-ViewModel的缩写有3个单词具体释义如下 Model: 数据模型特指前端中通过请求从后台获取的数据View: 视图用于展示数据的页面可以理解成我们的htmlcss搭建的页面但是没有数据ViewModel: 数据绑定到视图负责将数据Model通过JavaScript的DOM技术将数据展示到视图View上 如图所示就是MVVM开发思想的含义 2. Vue 代码格式
框架格式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-快速入门/titlescript srcjs/vue.js/script
/head
body!--视图区域--div idappinput typetext v-modelmessage{{message}}/div/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue},methods:{}})
/script
/html3. Vue 指令
Vue指令如下表
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-elsev-else-ifv-show根据条件展示某元素区别在于切换的是display属性的值v-for列表渲染遍历容器的元素或者对象的属性
3.1 v-bind v-model
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定
v-bind: 为HTML标签绑定属性值如设置 href , css样式等。当vue对象中的数据模型发生变化时标签的属性值会随之发生变化。
a v-bind:hrefurl链接1/aa :hrefurl链接2/ascript//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue,url:https://www.baidu.com},methods:{}})
/scriptv-model 在表单元素上创建双向数据绑定。什么是双向 vue对象的data属性中的数据变化视图展示会一起变化视图数据发生变化vue对象的data属性中的数据也会随着变化。 data属性中数据变化我们知道可以通过赋值来改变但是视图数据为什么会发生变化呢只有表单项标签所以双向绑定一定是使用在表单项标签上的。编写如下代码
a v-bind:hrefurl链接1/ainput typetext v-modelurlscript//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue,url:https://www.baidu.com},methods:{}})
/script表单项标签 input用于创建一个表单输入框可以输入文本、密码、日期、数字等。textarea用于创建一个多行文本输入框。select用于创建一个下拉选择框用户可以从预定义的选项中选择一个或多个选项。checkbox用于创建一个复选框用户可以从多个选项中选择一个或多个选项。radio用于创建一个单选按钮用户可以从多个选项中选择一个选项。button用于创建一个按钮用户可以点击执行特定的操作。submit用于创建一个提交按钮用于提交整个表单内容。reset用于创建一个重置按钮用于将表单内容重置为初始状态。label用于创建一个标签用于描述表单字段的用途或说明。fieldset用于创建一个字段集用于将相关的表单字段组合在一起。legend用于创建字段集的标题描述字段集的内容。 3.2 v-on
指令作用v-on用来给html标签绑定事件的
v-on语法给标签的事件绑定的函数必须是vue对象种声明的函数
input typebutton value点我一下 v-on:clickdemo()script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {demo: function(){alert(你点我了一下...);}}})
/script3.3 v-if和v-show
指令描述v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-if-elsev-elsev-show根据条件展示某元素区别在于切换的是display属性的值
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及以上)/spanscript// 定义 Vue 对象new Vue({el: #app,data: {age: 20}})
/scriptv-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及以上)/spanscript// 定义 Vue 对象new Vue({el: #app,data: {age: 20}})
/script3.4 v-for
指令描述v-for列表渲染遍历容器的元素或者对象的属性
格式
标签 v-for变量 in 列表{{变量名}}/标签标签 v-for(变量名,索引变量) in 列表{{索引变量 1}} {{变量名}}/标签模板
div idappdiv v-foraddr in addrs{{addr}}/divhrdiv v-for(addr,index) in addrs{{index 1}} : {{addr}}/div
/divscript//定义Vue对象new Vue({el: #app, //vue接管区域data:{addrs:[北京, 上海, 西安, 成都, 深圳]},methods: {}})
/script4. 生命周期
vue的生命周期指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法。
状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后
Vue渲染流程 mounted挂载完成Vue初始化成功HTML页面渲染成功以后我们一般用于页面初始化自动的ajaxaxios请求后台数据 模板
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {},mounted () {alert(vue挂载完成,发送请求到服务端)}})
/script
