快速入门Vue

Posted 2021-12-07 李元芳芳芳

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">{{index}}{{item}}</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){});
   }
}

})