前端
一点也不简单

Vue.js进阶之路1

什么是Vue.js?

vue.js是一个前端的js的渐进式()框架(个人项目)

作者:尤雨溪(google实习 阿里任职 weex研究团队(访问原生设备的库) vue.js是属于他的个人项目 )

发布时间:2016年10月

github关注度: 136K (不代表大陆地区)

Vue.js适用:适用于中小型项目

vue.js:借鉴了 react 和 angular

Vue.js的特性

1.vue.js是一个MVVM框架(由MVC架构衍生)

2.vue.js 数据也是单向的, 我们称之为, 单向数据流

3.vue.js是不兼容ie8及其以下浏览器(所以考虑低版本兼容是不存在的)

Vue.js的基本使用

1.引入Vue.js

(1).cdn

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

(2).下载本地

<script src="../../../basic-source/vue.js"></script>

(3).模块化安装

npm i vue -D/-S

cnpm i Vue

yarn add Vue

2.初始化Vue

(1).必须有一个html容器, 决定vue.js的作用范围

<div id="app"></div>

(2).初始化

 new Vue(options)
* el   表示装载, 将上面id为app的模板装载在  new Vue的实例中,也确定了一个作用范围
* data 数据

注意:学习Vue即是在学习配置项 && api

(3).数据绑定(声明式渲染)

名词:

mustauch语法糖: 双大括号语法 {{}} 支持js语法

注意事项:

  • 1. 模板中的 this 指的是 new Vue得到的实例 , 在模板中 this可以省略不写
<p> {{ this.$data.msg }} </p>
<p> {{ this.msg }} </p>
<p> {{ msg }} </p>  推荐的
  • 2. data选项在根实例中是对象, 除了跟实例以外是函数
  • 3.如何激活浏览器中 vue detools工具(这是Vue.js特有的调试工具,在谷歌商店中安装):在服务器环境下运行文件即可激活

(4).看一个初始化好了的代码

<!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> vue.js hello vue.js </title>
  <script src="../../../basic-source/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- {{ this.data.msg }} -->
       <p> {{ this.$data.msg }} </p>
       <p> {{ this.msg }} </p>
       <p> {{ msg }} </p>//推荐
    </div>
  <div id="content">
  </div>
</body>
<script>
    /*问题:vue.js是MVVM框架, 那么我们一下代码中那一部分是M   , 那一部分是V  , 那一部分是VM?
    M ---》 options 中  data 
    V ---》 options  中 el(模板)
    VM --》 new Vue() 得到的实例, 这个实例身上有很多的属性和方法
   */
  var vm = new Vue({
    el: '#app', //将new  Vue实例装载在 app这个div中, 规定了new Vue出来的实例的作用范围
    data: {
      // key:vulue
      msg: 'hello vue.js'
    }
  })
  new Vue({
    el: '#content'
  })
</script>
</html>

上面的代码会这样输出:

右上角的一个蓝色绿色的三角图标亮了,看见了没,这就是激活了的vue detools工具,没激活是灰色的,看地址是在服务器环境下运行的,输出了三条语句而且都是一样的,说明上面的三种写法都没问题,但我们更加推荐第三种{{ msg }}

3.Vue.js源代码简单学习

Vue.js部分源代码
Vue.js源代码部分

Vue.js源文件中,可以看见它使用了匿名函数,这很有用处

1.匿名函数 (function(){}) ()特点:

安全性高

减少了函数命名冲突

第二个括号才是函数的真正运行, 里面可以传入实际参数

第一个括号确定了匿名函数的作用范围, 语法不会报错, 里面放一个没有名字的函数, 函数可以接收形式参数

2.代码中的底层函数封装

匿名函数作用

(1).确定vue.js这个库的使用方法

  • 直接将Vue当做全局的一个方法使用, 因为将Vue挂在了 window
  • 使用了amd来定义vue.js这个库为一个模块, 这样我们才能模块化引入

(2).封装库如何定义

赞(1) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Vue.js进阶之路1

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏