Vue学习笔记

最新推荐文章于 2022-11-04 19:34:55 发布

longHARDEN

最新推荐文章于 2022-11-04 19:34:55 发布

阅读量124

点赞数

分类专栏：前端文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_42002500/article/details/120398642

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

学习资源

视频教程：黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibili

Vue

1、Vue基础

Vue简介

JavaScript框架
简化Dom操作
响应式数据驱动

第一个vue程序

导入Vue.js
创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

<body>
  <div id="app">
    {{ message }}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: " hello vue！ "
      }
    });
  </script>

</body>

el：挂载点

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

data：数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

eg：

<body>
  <div id="app">
    {{ message }}
    <h2>{{school}}</h2>
    <h2>{{school.name}}</h2>
    <ul>
      <li>{{campus}}</li>
      <li>{{campus[0]}}</li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: " hello vue！ ",
        school: {
          name: "heima",
          mobile: "123456"
        },
        campus: ["beijing", "shanghai", "guangzhou"]
      }
    });
  </script>

</body>

2、vue指令

本节目标：

通过Vue实现常见的网页效果
学习Vue指令，以案例巩固知识点

v-text

设置标签的文本值
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容

<div id="app">
  <h2 v-text="message"></h2>
  <h2>{{message}}</h2>  <!-- 插值表达式 -->
  <h2 v-text="message + '!'"></h2>
  <h2>{{message + "!"}}</h2>  <!-- 插值表达式 -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "v-text"
    }
  });
</script>

v-html

设置标签的innerHTML
内容中有html结构会被解析为标签

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "<a href='#'>v-html</a>"
    }
  });
</script>

v-on

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

<div id="app">
  <input type="button" value="v-on指令" v-on:click="fun">
  <input type="button" value="v-on简写" @click="fun">
  <input type="button" value="双击事件" v-on:dblclick="fun">
  <input type="button" value="事件绑定" @dblclick="fun">
  <h2 @click="changeMsg">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "dd"
    },
    methods: {
      fun: function () {
        alert("事件");
      },
      changeMsg: function () {
        this.message += "dd";
      }
    }
  });
</script>

v-show

根据表达式的真假，切换元素的显示和隐藏
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值

<div id="app">
  <h2 v-show="true">111</h2>
  <h2 v-show="isShow">222</h2>
  <h2 v-show="age>=18">333</h2>
  <img src="img.jpg" alt="" v-show="true">
  <img src="img.jpg" alt="" v-show="isShow">
  <img src="img.jpg" alt="" v-show="age>=18">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      isShow: false,
      age: 18
    }
  });
</script>

v-if

根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）
与v-show的区别
1. 原理不同。v-show更改元素的display属性，v-if将元素从dom上移除或添加
2. v-if操作dom树，频繁操作会降低性能

v-bind

设置元素的属性
完整写法 v-bind:属性名；简写的话可以直接省略v-bind，只保留 :属性名
如果是class属性，更建议使用对象方式更改类

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

    #app img {
      height: 200px;
    }
  </style>

<div id="app">
  <img v-bind:src="imgSrc" alt="" :title="imgTitle">
  <img src="img.jpg" alt="" v-bind:class="{active:isActive}" @click="toggleActive">
  <img :src="imgSrc" alt="">
  <img src="img.jpg" alt="" :class="{active:isActive}" @click="toggleActive">
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      imgSrc: "img2.jpg",
      imgTitle: "图片",
      isActive: false
    },
    methods: {
      toggleActive: function () {
        this.isActive = !this.isActive;
      }
    }
  });
</script>

v-for

根据数据生成列表结构
语法：(item,index) in 数据
item和index可以结合其他指令一起使用

<div id="app">
  <ul>
    <li v-for="(item,index) in arr" :title="item">
      {{index}}{{item}}
    </li>
    <li v-for="(item,index) in objArr">
      {{item.name}}
    </li>
  </ul>
</div>


<script src="../js/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      arr:[1,2,3,4,5],
      objArr:[
        {name:"jack"},
        {name:"rose"}
      ]
    }
  })

</script>

v-on补充

传递自定义参数，事件修饰符
事件绑定的方法写成函数调用的形式，可以传入自定义参数
事件的后面可以跟上**.修饰符**可以对事件进行限制

<div id="app">  <input type="button" @click="doIt('hello','vue')">  <input type="text" @keyup.enter="sayHi"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>  var app = new Vue({    el: "#app",    methods: {      doIt: function (p1, p2) {        alert(p1 + " " + p2);      },      sayHi: function () {        alert("hello vue");      }    }  });</script>

v-model

获取和设置表单元素的值（双向数据绑定）

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

3、网络应用

vue结合网络数据开发应用

axios：网络请求库
axios+vue：结合vue一起

axios

axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})axios.get(地址,{key:value,key2:value2}).then(function(response){},function(err){})

axios
使用get或post方法发送响应的请求，then方法中的回调函数会在请求成功或失败时触发
axios回调函数中的this已经改变，无法访问到data中的数据，可以使用箭头函数
或者通过设置变量that=this，使用that操作数据

<div id="app">  <input type="button" value="get" @click="getJoke">  <p>{{joke}}</p></div><script src="../js/axios.js"></script><script src="../js/vue.js"></script><script>  var app = new Vue({    el: "#app",    data: {      joke: "funny"    },    methods: {      getJoke: function () {        console.log(this.joke);        axios.get("https://autumnfish.cn/api/joke").then(            function (response) {              console.log(response.data);            }        ), function (error) {          console.log(error);        };      }    }  });</script>

longHARDEN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记

文章目录学习资源Vue1、Vue基础Vue简介第一个vue程序el：挂载点data：数据对象2、vue指令v-textv-htmlv-onv-showv-ifv-bindv-forv-on补充v-model3、网络应用axios学习资源视频教程：黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibiliVue1、Vue基础Vue简介JavaScript框架简化Dom操作响应式数据驱动第一个vue程序导入Vue.js创建Vue实例对象，设置el属性和dat
复制链接

扫一扫