我要悄悄的学Vue，然后找一份工作先.

最新推荐文章于 2021-07-13 14:20:32 发布

沙漏在下雨

最新推荐文章于 2021-07-13 14:20:32 发布

阅读量360

点赞数 1

分类专栏： Vue 文章标签： vue javascript 编程语言

本文链接：https://blog.csdn.net/qq_45906219/article/details/111641269

版权

Vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

学习Vue的第一天开始，课程是跟着Vue官网学习的，然后参考了菜鸟教程，
一步一步的自己敲代码熟悉。

文章目录

一. 关于Vue

Vue是一个响应式的开发，不同于我们之前使用的命令式开发，他是一种声明式的开发，
非常的方便，减少了数据的耦合性，极大的使数据分离。
Vue 读音就是 View 的发音就可以了，

二. 安装Vue

CDN 引入
本地下载
npm下载

三. 体验Vue

初步的体验了一下Vue的基本操作，使用了一下Vue的响应式开发，这个和后端的Django的语法差不多，我觉得.
体验了一下 mustache 语法，使用双大括号 {{ 变量 }} 这个变量是多样的，
当没有加引号的时候， Vue会自动去解析
当加了引号的时候， Vue会当作字符串去解析
同时，这个变量里面也可以是一个表达式，进行布尔运算，或者值的运算都是可以的，甚至还可以进行字符串的拼接
最棒的是，这个变量还可以是函数，或者计算属性
体验了一下 v-for 列表展示

可以快速的遍历这个列表， 生成一大堆相同的标签， 
我们可以通过对数据数组进行动态的变化， 页面中也会进行响应的

在这里，我们进行了一个计数器的小测试

~~~html
  <h2>当前计数&emsp;{{nowCount}}</h2>
  <button @click="addCount">+</button>
  <button @click="subCount">-</button>
  <script>
  let vm = new Vue({
    el: "#vm",
    data() {
        return {  
            nowCount:0,
        }
    },
    methods: {
        addCount:function(){
            this.nowCount++;
        },
        subCount:function(){
            this.nowCount--;
        }
    },
})
</script>
~~~

四. 关于Vue的MVVM模型

MVVM模型是一个三层模型，

- M -> model   这个是我们的data数据
- V -> view    这个也就是DOM层， 关于我们的html文档部分
- VM -> viewModel   Vue层

我们的Vue就是在M和V模型中起到一个非常重要的作用，作为一个桥梁部分。

MVVM模型开发的优点
低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。
- 摘自百度百科
Vue的生命周期
Vue当被创建出来之后，就有它自己的生命周期了，关于Vue的生命周期，我还不能理解

五. 创建Vue对象

首先，我们需要导入Vue.js
编写代码

~~~html
  <script>
    let vm = new Vue({
      el: "",
      ......
    })
  </script>
~~~

Vue这个对象 options 里面可以放什么呢 (到现在学习为止)

- el:     这是一个挂载点， Vue用于管理的元素, 通常用 id 来确定  
- data:   返回的数据，
- methods:   返回的函数(多个)
- computed:  计算属性， 用于处理比较数据中比较复杂的属性， 里面创建对象， 最好使用名词， 表示这是一个已经确定好的属性

六. Vue的一些基础方法

mustache 语法 {{}}
v-once 用于数据只能被修改一次，下一次修改不起作用
v-html="" 用于原义的显示html代码
v-text="" 用于显示文本，这个和 mustache 语法相同，但是使用这个会覆盖标签内所有文本值
v-pre 用于打断语法解析，直接显示 {{变量}}
v-cloak 斗篷语法，Vue 加载之前可以存在这个属性，加载之后，这个属性就会自动被擦除
v-for 循环遍历用法: v-for = “item in object” 或者 v-for="(value, index) in object"
可以同时拿到值和索引下标

七. Vue动态绑定属性

使用 v-bind: 进行绑定，可以简写为 :

一些基础的属性比如： :src , :href
动态绑定 class

- 使用对象形式进行 
  <h2 :class="{类名:布尔值}">
  当布尔值为真的时候， 这个类起作用，
  当布尔值为假的时候， 这个类无作用
- 使用数组形式进行
  <h2 :class="[对象]">
  对象在data中生成，

动态绑定 style

- 使用对象形式进行
  <h2 :style="{css属性:值}">
  <h2 :style="{fontSize:finallySize}">
  这里面的属性，使用驼峰式，不适用css中的中短线 - 
  值是封装在data中的， vue会帮我们拿到
- 使用数组形式进行
  和 class是一样的

八. 作业和反思理解

1. 反思和理解
  初步的学习了Vue， 感觉Vue是很舒服的一种框架，很好用，老师讲的非常nice
  在编写代码的时候， 对于数组的遍历， 在js中我一般使用 for 或者 forin 去遍历， 然后在今天
  发现遍历还有一个 forof 的遍历方式，  这个方式是直接取到列表里面的对象的， 对于遍历来说， 这个更快， 更方便

2. 作业
  作业要求：
    使用Vue框架， 操作一个列表， 当点击列表中的某一项的时候， 更改该项的class属性

  代码如下：
  ~~~html
  <div id="test1">
  <ul>
    <li v-for="(value, index) in movies" :class="{active: index === liNum}" @click="toggleVClass(index)">
        No: {{index}} 电影: {{value}}
    </li>
  </ul>
  </div>
  <script>
     let vm1 = new Vue({
          el: "#test1",
          data() {
            return {
              movies: ["大话西游", "画皮", "三国演义", "小兵张嘎"],
              liNum: 0,
            }
          },
          methods: {
            toggleVClass: function (index) {
              this.liNum = index;
            },
          }
        });
    </script>
  ~~~