记录vue.js的入门基础
2020-01-07 本文已影响0人
码枫云
Vue是什么
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
有过node.js开发经验学习Vue.js会更快的上手
Vue的特点
1-双向数据绑定
2-解耦视图和数据
3-前端路由技术
4-虚拟DOM
5-可复用的组件
6-状态管理
Vue的安装与使用
第一种:CDN引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
第二种:下载引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
第三种:NPM安装Vue-Cli3手脚架进行安装
npm install -g @vue/cli
vue create hello-world
创建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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"> //创建一个标签 让Vue实例挂载在标签上(一般设置id为'APP')
<h1>{{title}}</h1> // 通过胡子语法{{}}把data里面的数据插入标签里面
<p>{{num+1}}</p> //可以在胡子语法里面做简单的逻辑
<p>{{txt===1 ? "文字1" : "文字2"}}</p>
</div>
</body>
</html>
<script>
let vm = new Vue({ //new一个Vue对象赋值给变量,里面传入一个对象,这个对象是用来给app里面的标签提供数据
el:"#app", //el是让Vue挂载到哪个元素上
data:{
title:'猪肉升价了' //data里面是一个对象,对象里面存放数据,
num:0,
txt:1
}
})
</script>
