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>Documenttitle>
   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() 得到的结果,我们是以标签化呈现的, ,我们称之为: 根实例组件 
 
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>
  
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>
 








 

你可能感兴趣的:(Vue.js初步了解)