Vue

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.

# 1. 安装（四种安装方式）

  1. 在页面上以 CDN包 的形式导入 (CDN 是什么？？？)

    1. 开发环境版本
    2. 生产环境版本

  2. 下载和引入 JavaScript文件 自行托管

    1. 开发环境版本
    2. 生产环境版本

  3. 使用 npm 安装（结合 webpack 和 CLI 的使用）

  4. 使用 官方的CLI 搭建项目

    ** 附加：MVVM 模式（ Model ViewModel View ）** 维基百科查询

    1. View视图层
      1. 向用户展示的界面
    2. Model数据层
      1. 一些死数据或者从服务器请求下来的数据
    3. ViewModel视图模型层
      1. 数据绑定：将 Model 的数据改变实时修改展示到 View
      2. 视图监听：将 DOM 发生一些事件实时修改到 Model 层的 Data 中

    ![截屏 2022-04-08 下午 10.32.41](/Users/xiaoyunfei/Library/Application Support/typora-user-images/ 截屏 2022-04-08 下午 10.32.41.png)

# 3. Vue 中 options 选项

  1. el

    1. 类型： String 或 DOM元素
    2. 作用：挂载 Vue 实例管理的 DOM 元素

  2. data

    1. 类型： Object 或 Function(组件当中data必须是一个函数)
    2. 作用：Vue 实例对应的数据对象

  3. methods

    1. 类型： {[key:sting]:Function}
    2. 作用：定义属于 Vue 的一些方法，可以在其他地方调用，可以在指令中使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
1.Vue初体验
<body>
  <div id="app">
    <h2>{{message}}</h2>   
    <h3>{{name}}</h3>
  </div>
</body>
<script>
  // 开发范式有两种:
  // 1.命令式范式
  // 2.声明式范式(Vue属于声明式范式开发)
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello,Vue.js !",
      name:"初学者"
    }
  });
</script>
2.Vue列表
<body>
<div id="app">
  <ul>
    <li v-for="item in message">{{item}}</li>
  </ul>
</div>
</body>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:["test_01","test_02","test_03","test_04"]
    }
  });
</script>
3.Vue计数器
<body>
  <div id="app">
    <h2>当前计数：{{counter}}</h2>
    <!-- <button v-on:click="counter++">+</button> -->
    <!-- <button v-on:click="counter--">-</button> -->
    <!-- v-on的语法糖为@ -->
    <button @click="add">+</button>
    <button v-on:click="sub">-</button>
  </div>
</body>
<script> 
  var app = new Vue({
    el:"#app",
    data:{
      counter:0
    },
    methods:{
      add:function(){
        this.counter++;
        console.log("自加一次");
      },
       sub:function(){
         this.counter--;
         console.log("自减一次");
       }
    }
  });
</script>

附加：方法 (method) 和函数 (Function) 的区别

  1. 一般实例对象里面的称为方法

  2. Vue 实例属性和方法，都有 $ 前缀，便于和用户定义的属性区别开

    1
    2
    3
    4
    5
    //$watch是一个实例方法
    vm.$watch('a',function(newValue,oldValue){
    	这个回调将在vm.a改变后调用
    //观察变量a的变化前后
    })
Vue基础
#Vue
Vue
http://example.com/2020/03/02/6002_Vue/
作者
XGG
发布于
2020年3月2日
更新于
2023年6月3日
许可协议