快速入门Vue
Posted 李元芳芳芳
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了快速入门Vue相关的知识,希望对你有一定的参考价值。
1.Vue基础
1.1 Vue简介
1.javascript框架
2.简化Dom操作
3.响应式数据驱动
1.2 第一个Vue程序
文档传送门:https://cn.vuejs.org
1.导入开发版本的Vue.js
2.创建Vue实例对象,设置el属性和data属性
3.使用简洁的模板语法把数据渲染到页面上
el挂载点:
<div id="app">
message
</div>
var app = new Vue(
el:"#app",
data:
message:"黑马程序员"
)
el是用来设置Vue实例挂载(管理)的元素
Vue实例的作用范围:Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器:可以,但是建议使用ID选择器
是否可以设置其他的dom元素:可以使用其他的双标签,不能使用html和BODY
data数据对象:
Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时,遵守js的语法即可
2.本地应用
用Vue开发网页效果,获取元素,操纵他们
2.1 Vue指令
1.内容绑定,事件绑定
v-text:设置标签的文本值
<div id="app">
<h2 v-text="message"></h2>
<h2>message + "!"</h2>
</div>
var app = new Vue(
el:"#app",
data:
message:"百里守约"
)
v-html:设置标签的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html
<div id="app">
<p v-html="content"></p>
</div>
var app = new Vue(
el:"#app",
data:
//content:"百里守约"
content:"<a href="#">百里守约</a>"
)
v-on基础:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
<div id="app">
<input type="button" value="事件绑定" v-on:事件名="doit">
<input type="button" value="事件绑定" v-on:click="doit">
<input type="button" value="事件绑定" v-on:dbclick="doit">//双击
<input type="button" value="事件绑定" @dbclick="doit">
</div>
var app = new Vue(
el:"#app",
methods:
doit:function()
//逻辑
)
2.切换显示,属性绑定
v-show:根据表达式的真假,切换元素的显示与隐藏
原理:是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新
<div id="app">
<img src="地址" v-show="true">
<img src="地址" v-show="isShow">
<img src="地址" v-show="age>=18">
</div>
var app = new Vue(
el:"#app",
data:
isShow:true,
age:16
)
v-if:根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换v-show,反之使用v-if,前者的切换消耗小
<div id="app">
<p v-if="true">我是一个p标签</p>
<p v-if="isShow">我是一个p标签</p>
<p v-if="表达式">我是一个p标签</p>
</div>
var app = new Vue(
el:"#app",
data:
isShow:false
)
v-bind:设置元素的属性(比如:src,title,class)
v-bind:属性名=表达式
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删class建议使用对象的方式
<div id="app">
//<img src="地址">
<img v-bind:src="imgSrc">
<img v-bind:title="imgTitle + '!!!!'">
//<img class="active">
<img v-bind:class="isActive?'active:""'">
<img v-bind:class="active:isActive">
<img :src="imgSrc">
<img :title="imgtitle+'!!!'">
<img :class="isActive?'active':''">
<img :class="active:isActive">
</div>
var app = new Vue(
el:"#app",
data:
imgSrc:"图片地址",
imgTitle:"百里守约",
isActive:false
)
3.列表循环,表单元素绑定
v-for:根据数据生成列表结构
<div id="app">
<ul>
<li v-for="item in arr" :title="item">item</li>
<li v-for="(item,index) in arr" :title="item">indexitem</li>
<li v-for="(item,index) in objArr" :title="item">item.name</li>
</ul>
</div>
var app = new Vue(
el:"#app",
data:
arr:[1,2,3,4,5],
objArr:[
name:"jack",
name:"rose"
]
)
v-on补充:传递自定义参数,事件修饰符
<div id="app">
<input type="button" @click="doIt(p1,p2)">
<input type="text" @keyup="sayHi">
</div>
var app = new Vue(
el:"#app",
methods:
doIt:function(p1,p2),
sayHi:function()
)
文档传送门:https://cn.vuejs.org/v2/api/#v-on
v-model:获取和设置表单元素的值(双向数据绑定)
<div id="app">
<input type="text" v-model="message"/>
</div>
var app = new Vue(
el:"#app",
data:
message:"百里守约"
)
3.网络应用
Vue结合网络数据开发应用
3.1 axios
功能强大的网络请求库
axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容,或错误信息
https://github.com/axios/axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?key=value&key2=value2).then(function(response),function(err))
axios.post(地址,key:value,key2:value2).then(function(response),function(err))
3.2 axios+vue
axios 如何结合vue开发网络应用
axios回调函数中的this已经改变,无法访问到data中数据
把this保存起来,回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源
var app = new Vue(
el:"#app",
data:
joke:"搞笑的笑话"
,
methods:
getJokes:function()
axios.get("地址").then(function(response)
,function(err));
)
以上是关于快速入门Vue的主要内容,如果未能解决你的问题,请参考以下文章