Vue学习

最新推荐文章于 2022-04-30 00:00:00 发布

沉灬沦

最新推荐文章于 2022-04-30 00:00:00 发布

阅读量166

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_47957537/article/details/118398375

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是Vue

Vue 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.Vue基础

el:挂载点

基础标签指令

指令v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

<span v-text="msg">ss</span>
<!-- 和下面的一样 -->
<span>{{msg}}ss</span>

v-text是覆盖掉原来的值

指令v-html

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

<div v-html="html"></div>

指令v-no

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

指令v-show

根据表达式之真假值，切换元素的 display 显示与不显示

指令v-if

根据表达式的值的真假来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建

指令V-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 item in value，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

指令v-model

在表单控件或者组件上创建双向绑定

查询天气小应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>天知道</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/tianindex.css" />
  </head>

  <body>
    <div class="wrap" id="app">
      <div class="search_form">
        <div class="logo"><img src="../img/logo.png" alt="logo" /></div>
        <div class="form_group">
          <input
            type="text"
            class="input_txt"
            v-model="city"
            placeholder="请输入查询的天气"
            @keyup.enter="show02()"
           />
          <button class="input_sub" @click="show02()">
            搜 索
          </button>
        </div>
        <div class="hotkey" >
          <a href="javascript:;"  @click="show($event)" >北京</a>
          <a href="javascript:;"  @click="show($event)" >上海</a>
          <a href="javascript:;"  @click="show($event)" >广州</a>
          <a href="javascript:;"  @click="show($event)" >深圳</a>
        </div>
      </div>
      <ul class="weather_list" >
        <li v-for="item in TQ">
          <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
          <div class="info_temp">
            <b>{{item.low}}</b>
            ~
            <b>{{item.high}}</b>
          </div>
          <div class="info_date"><span>{{item.date}}</span></div>
        </li>
      </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="../js/axios.min.js"></script>
    <!-- 自己的js -->
  <script >
    var app = new Vue({
      el:"#app",
      data:{
        city:""
        ,TQ:[]
      },
      methods:{
        show($event){
          var city;
          city=$event.target.innerText;
          this.city=city;
          this.show02();
        },
        show02(){
          var thet=this;
          axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function (result) {
            thet.TQ=result.data.data.forecast;
            console.log(result)
          })
        }
      }
    })



  </script>

  </body>
</html>

沉灬沦

关注

0
点赞
踩
0

收藏

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

1.什么是VueVue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。2.Vue基础el:挂载点基础标签命令v-text更新元素的textContent。如果要更新部分的textContent，需要...
复制链接

扫一扫