快速入门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的主要内容,如果未能解决你的问题,请参考以下文章

vue 3.x基础入门:vue 的指令与过滤器

Vue快速入门(从入门到实战)(IDEA版)一篇文章即可快速入门(可直接开发前后端分离项目)

[vue3快速入门] 9.vue模板语法

VUE入门

Pinia 快速入门

Vue.js 60 分钟快速入门