一，vue.js是什么？

Vue是一套基于构建用户界面的渐进式框架。

  1. 用于构建用户界面；
  2. 渐进式框架什么意思？

vue的核心库只关注视图层！

1. Vue.js的引入

开发环境版本，包括有帮助的命令行警告
<script src="https::cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
生产环境版本，优化了尺寸和速度
<script src="https:cdn.jsdelivr.net/npm/vue@2"></script>
疑问：

在实际项目开发时，使用哪个版本引入vue呢？

2. 声明式渲染

vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。

渲染方式：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         {{message}} {{message+message}}
  12.         <div v-bind:id="message"></div>
  14.     </div>
  15.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  16.     <script>
  17.         var vm = new Vue({
  18.             el: '#app',
  19.             data:{
  20.                 message: 'hello world',
  21.                 item: {
  22.                     title: '课程1',
  23.                     del: false
  24.                 }
  25.             }
  26.         })
  27.     </script>
  28. </body>
  29. </html>

备注：

v-bind:id=”message” 该指令的意思是：将这个元素节点的id属性与Vue实例的message属性绑定在一起。

3. 条件与循环

控制切换一个元素是否显示可以使用：v-if 和 v-else

  1. <!DOCTYPE html>
  2. <html lang="en">   //表示定义的语言为英文；lang="zh-CN"表示定义的语言为中文
  3. <html>
  4.   <head>
  5.     <meta charset="UTF-8"/>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge"> //X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页；Edge模式告诉IE以最高级模式渲染文档
  7.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8.   </head>
  9.   <body><body>
  10. </html>