[JavaScript知识库]Vue框架2.x的初尝试

?

Vue路线

1. Vue2.x的基础语法

2. webpack

3. 脚手架

4. 项目开发（移动端项目开发APP）

5. Ts（Typescript）

6. Vue3.x基础语法

7. 项目开发（PC端后台管理系统）

一、Vue初尝试

官方地址: 介绍 — Vue.js

Vue是一个渐进式 JavaScript 框架。

Vue只关系视图层，如果你需要有其他的业务，vue-Router 、Vuex等等。

MVC和MVVM

MVC和MVVM都是一种设计思想。MVC，model（模型）；view（视图）；controller（控制器）

1.1 Vue安装

• 直接引入

  <script src="">

• 先安装再引入

  npm install vue@2.6.14

• 因为是2.0版本，在安装的时候需要手动指明版本号

1.2 第一个Vue程序

?

<div id="app">{{msg}}</div>
<script>
 ? ?new Vue({
 ? ? ?el: "#app",
 ? ? ? ?data: {
 ? ? ? ? ?msg: "helloworld"
 ? ? ?  }
 ?  }) ? ?
</script>

1.3 指令

Vue内置的属性 （）

• v-text

  渲染数据的

  <div v-text="msg">
   ? ?
  </div>

• v-html

  渲染富文本

  <div v-text="msg">
   ? ?
  </div>
  <script>
   ? ?const app = new Vue({
   ? ? ? ?el: "#app",
   ? ? ? ?data: {
   ? ? ? ? ? ?msg: "<h1>helloworld</h1>"
   ? ? ?  }
   ?  })
  </script>

• v-pre

  原样输出

• v-model

  数据双向绑定，原理mvvm。

  v-model具体实现是什么？

  本阶段暂且v-model只能使用input标签上

• v-bind

  绑定属性：可以绑定已有属性和自定义的属性

  <img :src="url">

• v-on

  <button v-on:click="add">
  <button @click="add">
   ? ?
  </button>
  <script>
   ? ?const app = new Vue({
   ? ? ? ?el: "#app",
   ? ? ? ?data: {
   ? ? ? ? ? ?msg: "<h1>helloworld</h1>"
   ? ? ?  },
   ? ? ? ?methods: {
   ? ? ? ? ? ?add() {
   ? ? ? ? ? ? ? ?
   ? ? ? ? ?  }
   ? ? ?  }
   ?  })
  </script>

• v-for

  <ul>
   ? ?<!--
   ? ? ? 谁要遍历就放到谁上面
   ? ?-->
   ? ?<li v-for="(item, index) in list">{{item}}</li>
  </ul>