深圳网站建设 乐云践新,最新新闻资讯,上海百度推广开户,wordpress知识管理系统Vue学习
一、Vue入门
1、 引入Vue Vue (读音 /vjuː/#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层#xff0c;不仅易于上手#xff0c;还便于与第三方库…Vue学习
一、Vue入门
1、 引入Vue Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。 使用Vue有多种方式我们入门阶段就使用下面的方式即可。
!-- 开发环境版本包含了有帮助的命令行警告 --
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script2、创建Vue实例 在下面我们创建了一个Vue实例el用于指定当前Vue为哪个容器服务有三种方式指代分别是id选择器class选择器和标签选择器不能是html和bodydata用于定义数据数据供el所指定的容器去使用可以写成对象和函数式methods由于定义函数。
script//创建一个Vue对象var appnew Vue({//el用于指定当前Vue为哪个容器服务值通常为css选择器字符串el:#app,//id选择器也就是div idapp// el:.app,//class选择器//el:div,//标签选择器不能是heml和body)//data中用于定义数据数据供el所指定的容器去使用值可以写成对象和函数式//对象data:{msg:Hello World!},/*函数式data:{msg:Hello World!},*///函数methods:{show:function () {alert(this.msg)}}})
/script3、使用Vue 在这里我们使用插值语法来显示上面data中所定义的数据msg的内容。
插值表达式语法
{{ 变量名/对象.属性名 }}div classapp!--插值语法--{{msg}}
/div二、 Vue指令
1、显示文本和HTML
v-text //将数据解释为普通文本
v-html //如果是普通文本则和v-text一样如果是HTML将数据解释为HTML
v-once //执行一次性地插值当数据改变时插值处的内容不会更新。在下面我们不仅显示了data中数据msg的值还有一个新的数据ht和firstM。在这里我们注意一下如果ht是一段HTML代码如h2 Hello World!/h2那么v-html最终会将ht解释为HTML并显示Hello World!对于v-once它只会显示firstM最初的值如果firstM发生改变v-once所处的标签内容不会更新。
div idapph2 v-textmsg/h2h3你好{{msg}}/h3span v-htmlht/spaninput typetext v-model:valuehtspan v-oncefirstM/span
/div2、为元素绑定事件 下面给出的是事件的完整写法和简写值得注意的是在methods的函数中我们可以通过this.数据名的方式使用和修改数据。
v-on:click //单击事件
v-on:mouseenter //鼠标移入事件
v-on:dblclick //双击事件可以简写成
click //单击事件简写
mouseenter //鼠标移入事件
dblclick //双击事件改变数据
this.数据名???能学习Vue的都是有前端三剑客的基础的下面就不过多赘述了。
body
div idappinput typebutton value单击事件 v-on:clickv_on/inputinput typebutton value单击事件简写 clickupdate/inputinput typebutton value鼠标移入事件 mouseenterv_on/inputinput typebutton value双击事件 dblclickv_on/input
/div!-- 开发环境版本包含了有帮助的命令行警告 --
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
scriptvar appnew Vue({el:#app,//id选择器// el:.app,//class选择器// el:div,//标签选择器除了html和bodydata:{msg:生命是什么},methods:{v_on:function () {alert(this.msg)},update:function (){if(this.msg已改变){this.msg生命是什么}else{this.msg已改变}this.v_on()}}})
/script
/body3、控制元素的显示和隐藏 v-show和v-if的区别是v-show在表达式为假时按F12检查代码其所在标签是存在的而v-if所在的标签不存在。
//根据表达值的真假来切换元素的显示和隐藏
v-show //代码一直在v-if //表达式为假代码直接不存在
v-else-if
v-else下面代码是通过button的点击事件控制v-if和v-show的表达式的真假以达到控制Hello World!的显示。
div idappinput typebutton value切换 clickshowbrspan v-ifflagHello World!/spanbr/span v-showflagHello World!/span
/div!-- 开发环境版本包含了有帮助的命令行警告 --
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
scriptvar appnew Vue({el:#app,data:{flag:true},methods:{show:function () {this.flag!this.flag}}})
/script
/body4、设置元素的属性
v-bin //设置元素的属性比如src,title,classv-bin:src???
v-bin:title???
v-bin:class???简写
:src???
:title???
:class???5、列表显示v-for 代码中都有注释这里就不过多赘述了。
div idappul!-- arr为数组或对象item为其中的每一项index为索引值从零开始 --li v-for(item,index) in arr第{{index}}位是{{item}}/li/ulh2 v-for(item,index) in str v-bind:titleitem.name第{{index}}位是{{item.name}}/h2
/div!-- 开发环境版本包含了有帮助的命令行警告 --
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
scriptvar appnew Vue({el:#app,data:{arr:[1,2,3,4,5],str:[{name:1},{name:2},{name:3},]},methods:{show:function () {}}})
/script6、v-on补充 !--传递自定义参数事件修饰符--input typebutton value点击 clickdoIt(444,你好)input typetext keyupdoIt(555,你吃了吗)input typetext keyup.enterdoIt(666,你吃了吗) //回车触发7、v-model v-model可以实现数据双向绑定通过下面的代码可以知道当在输入框中输入数据并按下回车msg中的数据会变成你输入的内容。
v-model //获取和设置表单元素的值双向数据绑定!--改变输入框的值数据msg的值也会同时变化--
div idappinput typetext v-modelmsg keyup.entershowbr{{msg}}
/div8、常用内置指令
1. v-text : 更新元素的 textContent
2. v-html : 更新元素的 innerHTML
3. v-if : 如果为 true, 当前标签才会输出到页面
4. v-else: 如果为 false, 当前标签才会输出到页面
5. v-show : 通过控制 display 样式来控制显示/隐藏
6. v-for : 遍历数组/对象
7. v-on : 绑定事件监听, 一般简写为
8. v-bind : 绑定解析表达式, 可以省略 v-bind
9. v-model : 双向数据绑定
10. v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }9、自定义指令 在上面我们都是在使用Vue提供的指令这些指令可以实现的功能有很多。但是有些时候这些指令不能实现我们所需的功能时我们可以自己定义指令。有下列两种方式。
1、 注册全局指令
//第一个参数是指令的名字不需要写上v-前缀
//第二个参数可以是对象数据也可以是一个指令函数
Vue.directive(my-directive, function(el, binding){
el.innerHTML binding.value.toupperCase()
})2、注册局部指令
directives : {my-directive : {bind (el, binding) {el.innerHTML binding.value.toupperCase()}}
}3、使用指令 自定义指令的使用方式和内置指令是差不多的。
v-my-directivexxx三、 简单学习axios
引入axios
1、简介 Axios 是一个基于 promise 网络请求库作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 2、引入 我们可以通过下列方式引用。
!--引入axios--
script srchttps://unpkg.com/axios/dist/axios.min.js/script3、get请求和post请求 在这里我们先学习一下axios的其中两个请求get和post。两者的简单区别是get中的所有信息都在地址栏url中而post的信息在请求体中。 下面为两种请求的写法 !--发送get请求--!--第一个参数为url后可以加和接多个数据--axios.get(https://autumnfish.cn/api/joke/list?num3).then(function (response) {//回调函数变量response为返回的数据console.log(response)},function (error) {console.log(error)})!--发送post请求--!--第一个参数为url第二个参数为数据--axios.post(https://autumnfish.cn/api/user/reg,{username:jack}).then(function (response) {console.log(response)},function (error) {console.log(error)})4、完整写法
div idappinput typebutton valueget classgetinput typebutton valuepost classpost
/div!--引入axios--
script srchttps://unpkg.com/axios/dist/axios.min.js/script
!--发送get请求--
scriptdocument.querySelector(.get).onclickfunction () {axios.get(https://autumnfish.cn/api/joke/list?num3).then(function (response) {//回调函数变量response为返回的数据console.log(response)},function (error) {console.log(error)})}
!--发送post请求--document.querySelector(.post).onclickfunction () {axios.post(https://autumnfish.cn/api/user/reg,{username:jack}).then(function (response) {console.log(response)},function (error) {console.log(error)})}
/script四、 小案例
Vue小案例-计数器
!--
学习vue
实现计数器--!DOCTYPE html
html langen
headmeta charsetUTF-8titlevue-04/title
/head
body
div idappinput typebutton value增加 clickadd{{num}}input typebutton value减小 clicksub/div!-- 开发环境版本包含了有帮助的命令行警告 --
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
scriptvar appnew Vue({el:#app,data:{num:1},methods:{add:function () {if(this.num10){alert(再加就到头了)}else{this.num}},sub:function () {if(this.num1){alert(你触碰到我的底线了)}else {this.num--;}}}})
/script
/body
/htmlaxios小案例-获取笑话
!--
学习Vue
axios
获取笑话
--
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevue-11/title
/head
body
h1Hello World!/h1
div idappinput typebutton value获取笑话 clickgetJokep{{msg}}/p
/div
!-- 开发环境版本包含了有帮助的命令行警告 --
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
script srchttps://unpkg.com/axios/dist/axios.min.js/script
scriptvar appnew Vue({el:#app,//id选择器data:{msg:很好笑的笑话},methods:{getJoke:function () {_thisthis//在axios里this会有变化这里要用变量存起来axios.get(https://autumnfish.cn/api/joke).then(function (resp) {console.log(resp.data)_this.msgresp.data;},function (error) {console.log(error)})}}})
/script
/body
/html
