vue基础

转载

mob604756f3c518 2021-08-11 00:57:00

文章标签 html vue.js 数据生命周期开发版 文章分类 代码人生

一、简单认识Vue
二、使用vue
三、vue的小问题

一、简单认识Vue

Vue是一个渐进式框架：
Vue有很多特点和高级特性
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
安装：
- 方式一：直接CDN引入
  - 选择开发版本或者是生产版本

<!-- 开发版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script>
  <!-- 生产版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdeliver.net/npm/vue"></script>

方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js

生产环境 https://vuejs.org/js/vue.min/js

方式三：NPM安装

后续通过webpack和CLI的使用，我们使用该方式。

二、使用vue

es6中定义变量let，定义常量const。

1、vue初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 创建元素 -->
<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    // 变成范式:声明式编程   好处:界面数据分离
    const app = new Vue({
        el:'#app',   // 挂载元素，由Vue管理这个元素
        data:{
            message:"你好！世界！"
        }
    })

    // 原始js的做法
    // 1.创建div元素,设置id属性
    // 2.定义一个变量叫message
    // 3.将message变量放在前面的div元素中显示
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el : '#app',
    data : {
      movies:['星际穿越', '大话西游', '少年派', '盗梦空间']
    }
  })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <h2>当前计数:{{counter}}</h2>
  <!--<button v-on:click="counter++">+</button>
  <button v-on:click="counter&#45;&#45;">-</button>-->
  <button v-on:click="add">+</button>
  <button v-on:click="sub">-</button>
  <!-- 语法糖:简写@click是v-on:click的简写 -->
</div>

<script src="../js/vue.js"></script>
<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>
</html>

2、vue中的MVVM

model viewmodel view

3、创建vue实例传入的options

el：
- 类型：string|HTMLElement
- 作用：决定之后Vue实例会管理哪一个DOM
data:
- 类型：Object|Function（组件当中，data必须是一个函数）
- 作用：Vue实例对象的数据对象
methods：
- 类型：{[key:string]:Function}（后面会用ES6的写法）
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。