vue基础篇

2019-12-01  本文已影响0人  sain_wu

本人是一名Android开发人员，最近项目前端人员吃紧，于是开始了vue的自学之旅。

vue简介

https://cn.vuejs.org 作者:尤雨溪

  1. JavaScript框架
  2. 简化Dom操作
  3. 响应式数据驱动（数据驱动视图）

vue第一个程序

  1. 导入开发版本的Vue.js
  2. 创建Vue实例对象, 设置el属性和data属性
  3. 使用简洁的模板语法把数据渲染到页面上
<body>
  <div id="app">
    <!-- 使用简洁的模板语法把数据渲染到页面上 -->
    {{ message }}
  </div>
  
  <!-- 导入开发版本的Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })  
  </script>
</body>

el:挂载点，绑定页面元素

MVVM

Vue指令

以v-开头的一组特殊语法,分为三类介绍

1. v-text, v-html, v-on

内容绑定，事件绑定

<body>
  <div id="app">
      <!-- 设置标签的文本值(textContent) -->
      <h2 v-text="message+'!'">深圳</h2>
      <h2>{{ message +'!'}}深圳</h2>
  </div>

  <!-- 导入开发版本的Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue',
      }
    })  
  </script>
</body>

网页渲染：
Hello Vue!
Hello Vue!深圳

总结：
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。

<body>
  <div id="app">
      <!-- 设置标签的innerHTML -->
      <p v-html="message"></p>
      <p v-text="content"></p>
      <p v-html="content"></p>
  </div>

  <!-- 导入开发版本的Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue',
        content: '<a href="https://cn.vuejs.org/">Hello Vue</a>'
      }
    })  
  </script>
</body>

网页渲染：

总结
v-text指令无论内容是什么,只会解析为文本
v-html当内容中有html结构会被解析为标签，没有才解析为文本

<body>
  <div id="app">
      <!-- 为元素绑定事件 -->
      <input type="button" value="v-on指令" v-on:click="doIt">
       <!-- 指令可以简写为@ -->
      <input type="button" value="v-on@" @click="doIt">
      <!-- 传递参数-->
      <input type="button" value="v-on带参" @click="doIt1('you can ','you up')">
       <!-- 对事件进行限制, 限制触发的按键为回车-->
      <input type="text" @keyup.enter="sayHi">
  </div>

  <!-- 导入开发版本的Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      methods: {
                doIt:function(){
                   console.log("无聊");  
                },
                doIt1:function(p1,p2){
                   console.log(p1 + p2);  
                },
                sayHi:function(){
                    alert("一边去");
                }
            },
    })  
  </script>
</body>

总结
事件绑定的方法写成函数调用的形式，可以传入自定义参数
事件的后面跟上 .修饰符对事件进行限制，@keyup.enter可以限制触发的按键为回车
vue方法不可以重载哦

2. v-show, v-if, v-bind

<body>
  <div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <!-- 根据表达值的真假,切换元素的显示和隐藏 -->
    <p v-show="isShow">冻死了---v-show</p>
    <p v-if="isShow">冻死了</p>
  </div>

  <!-- 导入开发版本的Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        isShow: false,
      },
      methods: {
        changeIsShow: function () {
          this.isShow = !this.isShow;
        },
      }
    })  
  </script>
</body>

点击切换，发现v-show和v-if都能实现元素显示状态的切换，它们之间有啥区别呢，右键点击inspect进入调试模式，可以发现隐藏时，它们是有区别的

<div id="app">
    <input type="button" value="切换显示状态">
    <p style="display: none;">冻死了---v-show</p>
    <!---->
</div>

总结
根据真假切换元素的显示状态，指令后面的内容,最终都会解析为布尔值
v-show原理是修改元素的display,实现显示隐藏
v-if本质是通过操纵dom元素来切换显示状态
频繁切换用v-show，一次性用v-if

<img src={{imgUrl}}/>

可是浏览器一运行，立马打脸。原来差值表达式{{}}只能修改元素的值（尖括号外面的），不能修改元素的属性。

以下是一个动态更新猫图的网页，借用v-bind实现，api.thecatapi.com可以返回各种猫图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>v-bind指令</title>
</head>

<body>
  <div id="app">
    <img v-bind:src="imgUrl" height="300" width="300"/>
    <!-- 简写的话可以直接省略v-bind -->
    <img :src="imgUrl" height="300" width="300"/>
  </div>

  <!-- 导入开发版本的Vue.js  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        imgUrl: "https://cdn2.thecatapi.com/images/73q.jpg",
      },
      methods: {
        start: function () {
            this.loadURL();
            setInterval(this.loadURL, 3000);
        },
        loadURL: function() {
            var _this = this;
            ajax_get('https://api.thecatapi.com/v1/images/search?size=full', function(data) {
                var url = data[0]["url"];
                console.log("url: " + url);
                _this.imgUrl = url;
            });
        },
      }
    });  

    app.start();

  // 定义网络请求函数
  function ajax_get(url, callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            // console.log('responseText:' + xmlhttp.responseText);
            try {
                var data = JSON.parse(xmlhttp.responseText);
            } catch (err) {
                console.log(err.message + " in " + xmlhttp.responseText);
                return;
            }
            callback(data);
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  }
  </script>
</body>

</html>

总结

v-bind 经常用于修改class，实现不同的显示状态, 只是单向变动

对象的方式
<img v- bind:class="{active:isActive}"></div>
三目表达式
<i :class="isPlaying && index == controlItem?'list_menu__icon_pause':'list_menu__icon_play'"></i><span

v-bind和v-model区别：
https://blog.csdn.net/u011486491/article/details/90232280
v-bind
html中的属性、css的样式、对象、数组、number 类型、bool类型
v-model
主要是用在表单元素中，它实现了双向绑定。在同事使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的<input>中实现双向绑定

源代码参考

上一篇 下一篇

猜你喜欢

热点阅读