Vue笔记

最新推荐文章于 2022-11-28 15:30:16 发布

mizit

最新推荐文章于 2022-11-28 15:30:16 发布

阅读量379

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41935047/article/details/117825622

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue学习笔记

文章目录

vue学习笔记
@[toc]
官网文档
导入vue依赖
data数据对象
vue指令
v-text
v-html
v-on
v-show
v-if
v-bind
v-for
v-model

axios入门
基本语法

官网文档

https://cn.vuejs.org/v2/guide/

导入vue依赖

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

问：vue实例的作用范围是什么呢？
答：Vue会管理el选项命中的元素及其内部的元素

问：是否可以使用其他选择器(el通常采用id选择器：#)
答：可以使用，但建议使用ID选择器

问：是否可以设置其他dom元素呢？
答：可以，双标签都支持，除body和HTML标签外

data数据对象

<body>
  <div id="app">
    {{ message }}
    <h2>name：{{lunch.name}}</h2>
    <h2>tel：{{lunch.tel}}</h2>
    <ul>
        <li>{{menu[0]}}</li>
        <li>{{menu[1]}}</li>
        <li>{{menu[2]}}</li>
    </ul>
  </div> 
</body>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello World",
            lunch:{
                name:"麦当劳",
                tel:"4008-517-517"
            },
            menu:["麦乐鸡","薯条","可乐"]
        }
    })
</script>

vue指令

vue中有三类指令，分别用于
1.内容绑定，事件绑定：

v-text
v-html
v-on

2.显示切换，属性绑定

v-show
v-if
v-bind

3.列表循环，表单元素绑定

v-for
v-on
v-model

v-text

用v-text直接绑定数据

<div id="app">
    <h2 v-text="message"></h2>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"麦当劳"
        }
    })
</script>

v-text指令的作用是：设置标签内容(textContent)
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
内部支持写表达式

v-html

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

<body>
  <div id="app">
    <p v-html="content"></p>
    <p v-text="content"></p>
  </div>
</body>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      content: "<a href='http://www.baidu.com'>百度</a>"
    }
  })
</script>

注意跳转时必须加http:// 否则还是在本域名下。

v-on

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

<body>
  <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>
</body>

<script>
  var app = new Vue({
    el: "#app",
    data:{
      food:"麦当劳"
    },
    methods:{
      doIT:function(){
        alert('做it')
      },
      changeFood(){
        this.food+="好好吃！"
      }
    }
  })
</script>

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上点修饰符可以对事件进行限制，比如click.enter仅触发回车
官网文档事件修饰符参考

<input type="button" @click=fun1(p1,p2)>
<input type="text" @keyup.enter="fun2">

v-show

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏

<body>
  <div id="app">
    <h2 v-show="show">isShow1</h2>
    <h2 v-show="age>16">isShow2</h2>
    <h2 v-show="age>18">isShow3</h2>
  </div>
</body>

<script>
  var app = new Vue({
    el:"#app",
    data:{
      show:true,
      age:17
    }
  })
</script>

v-if

v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
与v-show的区别在于原理不同，v-if为false时，直接从dom树中移除
频繁改变显示状态的用v-show，反之用v-if，因为操作dom开销大

v-bind

v-bind指令的作用是：为元素绑定属性
完整的写法是v-bind:属性名
简写的话可以直接省略v-bind，只保留:属性名

<style>
  .active{
    border:1px solid red;
  }
</style>

<body>
  <div id="app">
    <img v-bind:src="imgSrc" alt="">
    <img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
    :class="isActive ? 'active':''" @click="toggleActive">
    <!-- <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" 
    :class="active:isActive" @click="toggleActive"> -->
  </div>
</body>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      imgSrc: "http://www.itheima.com/images/logo.png",
      imgTitle: "黑马程序员",
      isActive: false
    },
    methods:{
      toggleActive(){
        this.isActive = !this.isActive;
      }
    }
  })
</script>

v-for

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据集
item和index可以结合其他指令一起使用

<body>
<div id="app">
    <ul>
        <li v-for="food in foods">{{food}}</ul>
    </ul>

    <ul>
        <li v-for="(student,index) in students">{{index}}号学生：{{student.name}}</ul>
    </ul>
</div>
</body>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            foods:["麦乐鸡","薯条","可乐"],
            students:[
                {name:"张三",age:18},
                {name:"李四",age:19}
            ]
        },  
        methods:{

        }
    })
</script>

v-model

v-model又称双向绑定
作用是使data中的数据和表单中元素的value同步变化

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setMessage">
        <input type="text" v-model="message" @keyup.enter="getMessage">
        <h2>{{message}}</h2>
    </div>
</body>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"可乐"
        },
        methods:{
            getMessage(){
                alert(this.message);
            },
            setMessage(){
                this.message="汉堡";
            }
        }
    })
</script>

axios入门

axios是一个功能强大的网络请求库
###导入axios依赖

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基本语法

axios.get(url).then(function(response){},function(err){})
axios.post(url,{key:value,key2:value2}).then(function(response){},function(err){})

在两个接口上测试axios的get和post方法：

<script>
  /*
    接口1：随机笑话
    请求地址：https://autumnfish.cn/api/joke/list
    请求方法：get
    请求参数：num(笑话条数,数字)
    相应内容：随机笑话
  */

    /*
    接口2：用户注册
    请求地址：https://autumnfish.cn/api/user/reg
    请求方法：post
    请求参数：username(用户名,字符串)
    相应内容：注册成功或失败
  */
  var app = new Vue({
    el:"#app",
    data:{
      url:"https://autumnfish.cn/api/joke/list?num=3",
      url2:"https://autumnfish.cn/api/user/reg",
      jokes:[],
      regRes:"注册中"
    },
    methods:{

      axiosGet:function(){
        var that = this;
        axios.get(this.url).then(
          function(response){
            console.log(response);
            that.jokes=response.data.jokes;
          },
          function(err){
            console.log(err);
          })
      },

      axiosPost:function(){
        var that = this;
        axios.post(this.url2,{username:"JackMa"}).then(
          function(response){
            console.log(response);
            that.regRes=response.data;
          },
          function(err){
            console.log(err);
          })
      }
    }
  });
</script>