Vue.js初步了解

Vue.js介绍

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
引入Vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

vue版本

  • vue 1.0 2014年
  • vue 2.0 2016年
  • vue 3.0【 试用版 】 2019年国庆

vue源代码 【 思维 】
  • 匿名函数
   (function (形参1，形参2) {
     /* 你的代码 */
   })(实参1，实参2)
  • 好处
    1. 防止全局作用域
    2. 防止命名冲突
    3. 防止一些脚本的攻击
    4. 封装js库基本上都是用它来完成
 
数据驱动视图
  • 意义： 当数据发生改变时，视图也会随之改变
  • 我们从现在开始，不在关注v的变化了，我们关注data
 
双向绑定
  
 <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
   </head>
   <body>
     <div id="app">
       <input type="text" v-model = "msg">
       <p> {{ msg }} </p>
     </div>
   </body>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
     new Vue({
       el: '#app',
       data: {
         msg: 'Hello Vue'
      }
    })
   </script>
   </html>

 

new Vue() 得到的结果，我们是以标签化呈现的，<Root></Root> ，我们称之为： 根实例组件 
 
Vue案例:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Hello Vue </title>
</head>
<body>
  <div id="app">
    {{ this.msg }}
    <p> {{ msg }} </p>
  </div>
  <!-- <div id="root"></div> -->
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  /* 
    * 当我们通过script引入vue.js后，就会全局注册一个Vue变量，它是一个构造函数
    */
  //  console.log("兵哥: Vue", Vue)
  // new Vue( options ) // options 选项
  var vm = new Vue({
    el: '#app',//挂载：将一个已有的DOM元素的选择器挂载在构造函数的选项上,也确定了vue实例作用范围
    data: {
      msg: 'Hello Vue'
    }
  })
  console.log("兵哥: vm", vm)
</script>
</html>
 








 
posted @ 2019-10-17 17:28  小飞侠1  阅读(107)  评论(0)    收藏  举报