Vue

Vue初探-基础

Vue初探基础知识

Posted by wang chong on March 31, 2019

初探Vue

前端一直是一个发展迅速的方向,从经典的jQuery操作DOM到数据驱动视图开发。三大框架之一的Vue,也一直是一个比较热门的话题。当时Vue的作者尤雨溪试图使用definedProperty尝试做一个数据驱动的小项目,随着项目的变大逐渐变成了如今的Vue

Vue是一套用于构建用户界面的渐进式框架。Vue.js提供了MVVM风格的双向数据绑定,也就是我们所说的MVVM,MVVM是一种以数据驱动UI的一种设计模式,所以说Vue专注的是UI层。

随着前端项目的复杂引来了组件化开发,Vue的核心之一就是组件化。现代的所有的框架和库都想试图改变html的写法,造出一套属于自己的写法。Vue也不例外,Vue把html、css、js写在一个文件中,其文件名命名为xxx.vue。相当于其他的库来说,例如react,Vue的写法在学习过程中是比较好接受的,因为只是写法位置改变,与react使用的JSX相比,语法并没有发生变化,当然Vue也可以使用JSX。

Vue开发模式

上面提到Vue把html、css、js写在一个.vue的文件中。因为浏览器是只能识别htmlcssjs的,所以我们在开发Vue的时候必须要编译,把.vue文件编译成相对应的htmlcssjs才可以放在浏览器中运行。

MVVM模型

在Vue的MVVM模型中:View就是我们的视图,Model是请求过来的数据,ViewModel就是建立在View和Model之间的联系。所以是Vue是数据驱动视图:v=f(d)

Vue安装

下载包方式

  1. 独立版本

    • 下载并用script标签引入,Vue会被注册为一个全局变量
    • CDN:可以从jsdelivr或cdnjs获取。也可以使用npmcdn,这个链接指向发布到npm上的最稳定版本,可在npm.com/vue/上查看包的源代码。
    • CSP兼容版本
  2. NPM
  3. 命令行工具
  4. 开发版本
  5. Bower
  6. AMD模块加载器

脚手架构建

Vue.js提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需要一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

全局安装vue-cli

npm install -g vue-cli

创建一个基于webpack模板的新项目

vue init webpack my-project

安装依赖,启动

npm install

npm run dev

初始化Vue

创建一个Vue项目首先要初始化Vue,使用Vue构造函数实例化Vue。

const vm = new Vue({
    el : "",
    data : "",
})

初始化Vue实例传入一个对象,对象里面是Vue的属性。包含:数据、模板、挂载元素、方法、生命周期钩子函数等。上面el就表示Vue挂载元素是什么,data就是vue的数据。

Vue双大括号写法

Vue使用双大括号写法引用vue实例中data里面的值。也可以写js表达式运算等等。

双大括号写法在渲染数据的时候会把里面的东西当做字符串渲染,可以很好的防止跨域的脚本攻击。

<div id="app">
     3
</div>
<script>
const vm = new Vue({
    el : "#app",        //告诉vue控制那段html代码,把控制的html代码变成模板
    data : {            //数据绑定,以键值对的形式
        message : 'Hello Vue'
    }
})
</script>