vue基础

第一个vue程序

导入开发版本的vue.js<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
创建vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

el挂载点

vue的作用范围是什么？vue会管理el选项命中元素及其内部的后代元素
是否可以使用其他的选择器？可以使用，但是建议使用ID选择器
是否可以设置其他的dom元素？可以使用其他的双标签，不能使用HTML和body
el的作用是什么？用来设置vue实例挂载（管理）的元素

data：数据对象

vue用到的数据定义在data中
data中可以写复杂类型（如：对象，元组）的数据
渲染复杂类型数据时，遵守JS的语法即可（如：对象点语法，数组索引语法）

vue本地应用

v-text指令

vue指令指以v-开头特殊的语法
v-text指令的作用是：设置标签的内容（textCotent）
默认写法会替换全部内容，使用差值表达式{ { } }可以替换指定内容
内部支持写表达式

代码示例

 <div id="app">
     <h2 v-text="message+'!'"></h2>
     <h2 v-text="info"></h2>
     <h2>{ {message+'!'} }</h2>
 </div>
	
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         data:{
             message:"黑马程序员",
             info:"前端"
         },
     })
 </script>

v-html指令

v-html指令的作用是：设置元素的innerHTML
内容中有HTML结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本

代码示例

 <div id="app">
     <h2 v-text="content"></h2>
     <h2 v-html="content"></h2>
 </div>
	
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         data:{
             content:"<a href='http://www.itheima.com'>黑马程序员</a>"
         },
     })
 </script>

v-on指令

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中

代码示例

 <div id="app">
     <input type="button" value="v-on指令" v-on:click="doIt">
     <input type="button" value="v-on简写" @click="doIt">
     <h2 @click="changeFood">{ {food} }</h2>
 </div>
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         data:{
             food:"西蓝花"
         },
         methods:{
             doIt:function(){
                 alert('doit');
             },
             changeFood:function(){
                 console.log(this.food);
                 this.food+="好好吃"
             }
         },
     })
 </script>

计数器

思路

data中定义数据：比如num
methods中添加两个方法：比如add，sub
使用v-text将num设置给span标签
使用v-on将add，sub分别绑定给+，-按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递减，否则提示
代码示例

 <div id="app">
     <div class="input-num">
         <button type="button" @click="sub">-</button>
         <span>{ { num } }</span>
         <button type="button" @click="add">+</button>
     </div>
 </div>
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         data:{
             num:1
         },
         methods:{
             add:function(){
                 if(this.num<10){
                     this.num++;
                 }else{
                     alert("别点了最大了")
                 }
             },
             sub:function(){
                 if(this.num>0){
                     this.num--;
                 }else{
                     alert("别点了最小了")
                 }
             }
         },
     })
 </script>

创建vue示例时：el(挂载点),data(数据),methods(方法)
v-on指令的作用是绑定事件,简写为@
方法中通过this关键字获取data中的数据
v-text指令的作用是:设置元素的文本值,简写为{ { } }

v-show指令

v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新

代码示例

 <div id="app">
     <input type="button" value="切换显示状态" @click="changeIsShow"/>
     <input type="button" value="累加年龄" @click="addAge"/>
     <img src="img/logo.png" v-show="isShow">
     <img src="img/logo.png" v-show="age>=18">
 </div>
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         data:{
             isShow:false,
             age:17
         },
         methods:{
             changeIsShow:function(){
                 this.isShow = !this.isShow
             },
             addAge:function(){
                 this.age++;
             }
         },
     })
 </script>

v-if指令

v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换用v-show,反之使用v-if,前者的切换消耗小

代码示例

 <div id="app">
     <input type="button" value="切换显示" @click="toggleIsShow"/>
     <p v-if="isShow">黑马程序员</p>
     <p v-show="isShow">黑马程序员show</p>
     <h2 v-if="temperature>=35">热死了</h2>
 </div>
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         data:{
             isShow:false,
             temperature:40
         },
         methods:{
             toggleIsShow:function(){
                 this.isShow = !this.isShow;
             }
         },
     })
 </script>

v-bind指令

v-bind指令的作用是:为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名
需要动态的增删class建议使用对象的方式

代码示例

 <style type="text/css">
     .active{
         border: 1px solid red;
     }
 </style>
 <div id="app">
     <img v-bind:src="imgSrc">
     <br>
     <img :src="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
     <br>
     <img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
 </div>
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         data:{
             imgSrc:"http://www.itheima.com/images/logo.png",
             imgTitle:"黑马程序员",
             isActive:false
         },
         methods:{
             toggleActive:function(){
                 this.isActive=!this.isActive;
             }
         },
     })
 </script>

图片切换

定义图片数组
添加图片索引
v-bind绑定src属性
v-on图片切换逻辑
v-show显示状态切换

v-for指令

v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

代码示例

 <div id="app">
     <input type="button" value="添加数据" @click="add"/>
     <input type="button" value="移除数据" @click="remove"/>
     <ul>
         <li v-for="(item,index) in arr">{ { index+1 } }黑马:{ { item } }</li>
     </ul>
     <h2 v-for="item in vegetabes" v-bind:title="item.name">
         { { item.name } }
     </h2>
 </div>
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         data:{
             arr:['北京','上海','广州','深圳'],
             vegetabes:[
                 {name:"西蓝花"},
                 {name:"炒蛋"}
             ]
         },
         methods:{
             add:function(){
                 this.vegetabes.push({name:"花菜"});
             },
             remove:function(){
                 this.vegetabes.shift();
             }
         },
     })
 </script>

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种

代码示例

 <div id="app">
     <input type="button" value="点击" @click="doIt(666,'老铁')"/>
     <input type="text" @keyup.enter="sayHi"/>
 </div>
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         methods:{
             doIt:function(p1,p2){
                 console.log("doit");
                 console.log(p1);
                 console.log(p2);
             },
             sayHi:function(){
                 alert("吃了吗");
             }
         },
     })
 </script>

v-model指令

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据–表单元素的值

代码示例

 <div id="app">
     <input type="button" value="修改message" @click="setM" />
     <input type="text" v-model="message" @keyup.enter="getM"/>
     <h2>{ { message } }</h2>
 </div>
 <script type="text/javascript">
     var app = new Vue({
         el:"#app",
         data:{
             message:"黑马"
         },
         methods:{
             getM:function(){
                 alert(this.message);
             },
             setM:function(){
                 this.message="酷丁鱼"
             }
         },
     })
 </script>

axios使用

使用条件

导入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>,就可以发送请求了

两种请求方式

get方法
- 语法格式:axios.get("地址?key=value&key2=value2").then(function(response){},function(err){})
- then后是两个回调函数,第一个在向服务器请求完成后触发,第二个回调函数在请求失败的时候触发,他们的形参可以获取服务器的响应内容或错误信息
- 查询字符串的格式是key=value&key2=value2,key是接口文档提供的,value是要具体传输的数据
post方法
- 语法格式:axios.post("地址",{key:"value",key2:"value2"}).then(function(response){},function(err){})
- 不同之处:数据以对象的形式写在post的第二个参数,格式{key:value,key2:value2}

代码示例

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     </head>
     <body>
         <input type="button" value="get请求" class="get">
         <input type="button" value="post请求" class="post">
			
         <script type="text/javascript">
             document.querySelector(".get").onclick = function(){
                 axios.get("https://autumnfish.cn/api/joke/list?num=3")
                 .then(function(response){
                     console.log(response);
                 },function(err){
                     console.log(err)
                 })
             }
             document.querySelector(".post").onclick = function(){
                 axios.post("https://autumnfish.cn/api/user/reg111",{username:"曹哈哈"})
                 .then(function(response){
                     console.log(response);
                 },function(err){
                     console.log(err)
                 })
             }
         </script>
     </body>
 </html>

网络应用的核心

data数据的一部分内容是通过网络上获取到的

在方法中发送网络请求,在响应回来之后把服务器返回的数据设置给data中对应的值

 var app = new Vue({
     el:"#app",
     data:{
         joke:"笑话"
     },
     methods:{
         getJokes:function(){
             //this.joke
             axios.get("地址").then(function(response){
                 //this.joke?
             },function(err){});
         }
     }
 })

代码示例

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
         <div id="app">
             <input type="button" value="获取笑话" @click="getJoke" />
             <p>{ { joke } }</p>
         </div>
			
         <script type="text/javascript">
             var app = new Vue({
                 el:"#app",
                 data:{
                     joke:"很好笑的笑话"
                 },
                 methods:{
                     getJoke:function(){
                         // console.log(this.joke);
                         var that = this;
                         axios.get("https://autumnfish.cn/api/joke").then
                         (function(response){
                             // console.log(response)
                             // console.log(response.data)
                             // console.log(this.joke);
                             that.joke = response.data;
                         },function(err){})
                     }
                 },
             })
         </script>
     </body>
 </html>

pink老师讲的vue

vue基础

第一个vue程序

el挂载点

data：数据对象

vue本地应用

v-text指令

v-html指令

v-on指令

计数器

v-show指令

v-if指令

v-bind指令

图片切换

v-for指令

v-on补充

v-model指令

axios使用

使用条件

两种请求方式

网络应用的核心