琪露诺学习Vue.js的第一天

最新推荐文章于 2021-11-08 14:16:09 发布

全贞教天下第一

最新推荐文章于 2021-11-08 14:16:09 发布

阅读量167

点赞数

文章标签： Vue.js

本文链接：https://blog.csdn.net/wmw119/article/details/101031932

版权

什么是Vue.js

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

Node（后端）中的 MVC 与前端中的 MVVM 之间的区别

MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel

Vue的基本代码-如何定义一个基本的Vue代码结构

1、基本的Vue代码结构

<!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>Document</title>
</head>
<body>
 
</body>
</html>

2、导入Vue的包

<script src="./lib/vue-2.4.0.js"></script>

3、创建一个Vue的实例

<div id="app">
    <p>{{ msg }}</p>
</div>

<script>
    var vm = new Vue({
      el: '#app', 
      data: { 
        msg: '欢迎学习Vue'
      }
    })
</script>

将来 new 的Vue实例，会控制这个元素中的所有内容
这里的 data 就是 MVVM中的 M，专门用来保存每个页面的数据的
data 属性中，存放的是 el 中要用到的数据
通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】

4、v-cloak和v-text的使用

 <div id="app">
    <p v-cloak>++++++++ {{ msg }} ----------</p>
    <h4 v-text="msg">==================</h4>
    <div v-html="msg2">1212112</div>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>'
      }
    })

</script>

使用 v-cloak 能够解决插值表达式闪烁的问题，默认 v-text 是没有闪烁问题的
v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空
v-html可以使用html格式，而不是进行转义

5、v-bind

<input type="button" value="按钮" v-bind:title="mytitle">
<input type="button" value="按钮" :title="mytitle">

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
        mytitle: '这是一个自己定义的title'
      }
    })
</script>

Vue提供的属性绑定机制缩写是 :
v-bind: 是 Vue中，提供的用于绑定属性的指令
v-bind: 指令可以被简写为 :要绑定的属性
v-bind 中，可以写合法的JS表达式

6、v-on

<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" @click="show">

<script>
    var vm = new Vue({
      el: '#app',
      methods: {
        show: function () {
          alert('Hello')
        }
      }
    })
</script>

Vue提供的事件绑定机制缩写是 @
methods属性中定义了当前Vue实例所有可用的方法

Vue跑马灯实例

1、HTML结构

<div id="app">

    <p>{{info}}</p>

    <input type="button" value="开启" v-on:click="go">

    <input type="button" value="停止" v-on:click="stop">

  </div>

2、Vue实例

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '猥琐发育，别浪~~！',
        intervalId: null // 在data上定义 定时器Id
      },
      methods: {
        lang() {
          if (this.intervalId != null) return;
          this.intervalId = setInterval(() => {
            var start = this.msg.substring(0, 1)
        
            var end = this.msg.substring(1)
            this.msg = end + start
          }, 400)
        },
        stop() { // 停止定时器
          clearInterval(this.intervalId)
          this.intervalId = null;
        }
      }
    })
</script>

3、完整代码

<!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>Document</title>
  <!-- 1. 导入Vue包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <!-- 2. 创建一个要控制的区域 -->
  <div id="app">
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="低调" @click="stop">
    <h4>{{ msg }}</h4>
  </div>
  <script>
    // 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '猥琐发育，别浪~~！',
        intervalId: null // 在data上定义 定时器Id
      },
      methods: {
        lang() {
          // console.log(this.msg)
          // 获取到头的第一个字符
          // this

          if (this.intervalId != null) return;

          this.intervalId = setInterval(() => {
            var start = this.msg.substring(0, 1)
            // 获取到 后面的所有字符
            var end = this.msg.substring(1)
            // 重新拼接得到新的字符串，并赋值给 this.msg
            this.msg = end + start
          }, 400)

          // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
        },
        stop() { // 停止定时器
          clearInterval(this.intervalId)
          // 每当清除了定时器之后，需要重新把 intervalId 置为 null
          this.intervalId = null;
        }
      }
    })
    // 分析：
    // 1. 给 【浪起来】 按钮，绑定一个点击事件   v-on   @
    // 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；
    // 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；
  </script>
</body>
</html>

练习1：使用vue将下列data中cat记录显示插入到页面之中
var vm = {
   el: '#app',
   data: {
       cat: {
           name: '罗小黑',
           age: 18,
           desc: '是一只黑色的猫'
       }
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>day01-vue的基本代码</title>
    <link rel="stylesheet" href="">
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>

    <div id="app">
        <p>{{cat}}</p>
    </div>
    <script>
       var vm = new Vue({
            el: '#app',
            data: {
                cat: {
                    name: '罗小黑',
                    age: 18,
                    desc: '是一只黑色的猫'
                }
            }
       })

    </script>
</body>
</html>