Vue学习

要懂得走位

已于 2022-02-27 21:29:01 修改

阅读量340

点赞数

分类专栏：前端编程 Vue 文章标签： vue.js 学习前端

于 2022-02-27 16:01:30 首次发布

本文链接：https://blog.csdn.net/qq_48991959/article/details/122476216

版权

前端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

编程

2 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

文章目录

- Vue学习

Vue学习

进vue.js官网（https://cn.vuejs.org/），下载Vue.js

概念：

Vue是一个渐进式框架，可以作为应用的一部分嵌入其中。
它是一种声明式编程，区别以往的命令式编程，它更加方便流行，实现响应式交互。

Vue对象：

创建Vue对象的时候，传入了一些options：{} //在Vue.js官网中可以查

{}中包含了el属性：该属性决定这个Vue对象挂载到哪一元素
{}中包含了data属性：通常会存储一些数据，这些数据可以是我们直接定义出来的，也可以是来自于网络。从服务器加载的。
{}中包含一个数据列表时，html代码中使用v-for指令。
{}中包含methods属性，用于定义方法

简单计数器

<head>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>当前计数：{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter--;">-</button>-->

    <!--改良：食用方法可以完成多种操作-->
    <button v-on:click="add">+</button>
<!--    @click是简写，称为语法糖，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时要执行的方法-->
    <button @click="sub">-</button>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter:0,
        },
        methods:{
            add:function () {
                this.counter++;
                console.log("add被执行");
            },
            sub:function () {
                this.counter--;
                console.log("sub被执行");
            }
        }
    })
</script>

</body>

Vue中的MVVM

维基百科，一个学习概念性的网站
View ViewModel Model，ViewModel作为View和Model交流的桥梁，一方面它实现了数据绑定，将Model的改变反映到View中，另一方面它实现了DOM listener，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，可以在需要的情况下改变对应的data。
参考学习网站（来自博主：故事很长、）

Vue的生命周期钩子函数

方便开发者在想要的地方插入自己的代码
后续继续了解

模板设置

规范格式，两格缩进更加普及，一般大厂公司·都是用的2格缩进。
idea设置方法：file-setting-code style-HTML/CSS/…把制表符大小和缩进都改成2，确定即可
idea代码模板设置：复制要设为模板的代码，打开file-setting-live template 添加模板块…

插值—v-once、v-bind等一些指令

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}},你是个大美女</h2>
  <!--mustache语法中不仅可以直接写变量，还可以写简单的表达式-->
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}}{{lastName}}</h2>
<!--  这里的空格不用引号引起来也可以显示-->
  <h2>{{firstName}} {{lastName}}</h2>

<!--  v-once指令实现一次性插值，不能再改变-->
  <h2 v-once>v-once{{message}}</h2>

<!--  v-html指令实现输出真正的 HTML，相当于嵌入html语法-->
<!--  <h2 v-html>{{url}}</h2> 写错了写错了！好好注意！url人家都是放在标签里面的！ps标签中间的内容被覆盖-->
  <h2 v-html="url">v-html</h2>

<!--v-text不够灵活，它会用引号里的东西覆盖标签里的东西，一般不使用，-->
  <h2 v-text="message"></h2>
  <h2 v-text="message">,你是个大美女</h2>

<!--v-pre指令相当于转义作用，不解析地展示内容，ps此处展示了一个空格-->
  <h2 v-pre>v-pre       {{message}}</h2>

</div>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello!',
      firstName:'aoao',
      lastName:'zozo',
      url:'<a href="http://www.baidu.com">百度</a>',//这里必须要有替代文本或者什么东西，不然浏览器报错
    }
  })
</script>

</body>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>

<style>
  [v-cloak]{
    display: none;
  }
</style>

<div id="app">
<!--  cloak:斗篷 该指令在vue解析之后失效，为什么需要使用v-cloak，因为自上而下解析-->
  <h2 v-cloak>{{message}}</h2>
</div>

<script>
  setTimeout(function () {
    const app = new Vue({
      el:'#app',
      data:{
        message:'Hello!',
      }
    })
  },2000);

</script>
</body>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
  <!--错误错误！mustache在标签中间使用-->
  <!--<div src="{{message}}"></div>-->
  <!--正确做法:使用v-bind指令，用来绑定动态变量,经常用，语法糖：英文冒号‘:’-->
  <div v-bind:src="imgURL"></div>
  <a v-bind:href="aHref">连接展示处</a>
  <a :href="aHref">连接展示处</a>
</div>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello!',
      imgURL:'http://...',
      aHref:'http://www.baidu.com',
    }
  })
</script>

</body>

v-bind动态绑定class

<div id="app">
  <!--v-bind动态绑定class,和普通的class可以共存，内部会自动合并-->
  <!--  <h2 :class="{类名1:boolean,类名2:boolean}">{{message}}</h2>-->
  <h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2>
  <button v-on:click="btnClick()">按钮</button>
  <h2 class="title" :class="getClass()">{{message}}</h2>

<!--  加单引号解析为字符串，不加解析为变量-->
  <h2 :class="['active','line']">{{message}}</h2>
  <h2 :class="[active,line]">{{message}}</h2>
  <h2 :class="getClasses()">{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello!',
      isActive:true,
      isLine:false,
      active:'a',
      line:'b',
    },
    methods:{
      btnClick:function(){
        this.isActive = !this.isActive;
      },
      getClass:function(){
        return {active:this.isActive,line:this.isLine}
      },
      getClasses:function () {
        return [this.active,this.line]

      }
    }
  })
</script>

ES5和ES6部分区别：

var没有块级作用域，函数需要使用闭包，let可以看成更完美的var，它有自己的作用域，不需要使用闭包，并且有很多高级好用的点。
const是用来将某个变量修饰为常量并且必须给它初始化赋值，来保证数据的安全性。(常量的含义是指向的对象不能修改，但是可以改变对象内部的属性,示例如下：)

const obj = {
name:'ah',
age:18,
height:1.88,
}
obj.name = 'kobe';
obj.age = 40;

在ES6开发中，优先使用const，只有需要改变某一个标识符的时候才使用let。

对象的字面量增强写法：

//1.属性的增强写法
const name = 'ah';
const age = 18;
const height = 1.88;
//ES5的写法：
const obj = {
name:name,
age:age,
height:height,
}
//ES6写法：
const obj = {
name,
age,
height,
}

//2.函数的增加写法
//ES5的写法：
const obj = {
run:function(){
}
}
//ES6的写法:
const obj = {
run(){
}
}

条件渲染小案例

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账户</label>
    <input type="text" placeholder="用户账户" id="username"/>
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" placeholder="用户邮箱" id="email"/>
  </span>
  <button>切换类型</button>
</div>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      isUser:true,
    }
  })
</script>