2.1前置工作

1.给浏览器安装 Vue Devtools 插件

2.标签引入Vue包

3.（可选）阻止vue在启动时生成生产提示Vue.config.productionTip = false

4.favicon 需要将页签图标放在项目根路径，重新打开就有了（shfit+F5 强制刷新）

2.2初识Vue

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2.root 容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

3.root 容器里的代码被称为Vue模板

4.Vue 实例与容器是一一对应的

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用

6.{{ xxx }}中的 xxx 要写 js 表达式，且 xxx 可以自动读取到data中的所有属性 注意区分：js 表达式和 js代码（语句）

a. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

b. js代码（语句）

7.一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

<!DOCTYPE html><html><title>初识Vue</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器 --><div id="demo"><h1>Hello，{{ name.toUpperCase() }}，{{ address }}</h1></div><script type="text/javascript" >Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。// 创建Vue实例new Vue({el: '#demo', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串data: {          // data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象name: 'cess',address: '成都'}})</script></body>
</html>

HELLO,CESS,成都

三、 vue 的基本使用

3.1 基本使用步骤

① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）

3.2 基本代码与 MVVM 的对应关系

四、vue 的调试工具

4.1安装 vue-devtools 调试工具

vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。
Chrome 浏览器在线安装 vue-devtools ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox 浏览器在线安装 vue-devtools ：
Vue.js devtools – 下载

Vue的基本使用步骤相关推荐

vue cli 3 升级到 vue cli 4 方法步骤及升级点总结
vue cli 3 升级到 vue cli 4 方法步骤及升级点总结官方升级英文文档,中文文档相对滞后. 简介:vue cli 4 官方已经更新有一段时间了,现在是4.0.5 版本,看了官方文档大概 ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
vue实现竖式步骤条_手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
Flask + Vue 搭建简易系统步骤总结
之前一段时间一直在学习 python,后来在项目中用 weex 时接触到了 vue.js,本来 python 是自己想学的一门脚本技术,weex 是项目需要,必须了解些 vue.js 方面的语法,所以 ...
vue项目优化及步骤
生成打包报告,根据报告优化项目,然后添加进度条,安装nprogress插件,在main.js下编辑代码 //导入进度条插件 import NProgress from 'nprogress' //导入 ...
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤包含Vue2 和 Vue3
保存一下操作步骤,这是Vue2的,最后有Vue3的下载地址: https://wwm.lanzoul.com/iu4tS04cfeja 密码: vue_wt 安装步骤: 以谷歌浏览器为例第一步 ...
Vscode创建vue项目的详细步骤
目录一.概述操作的前提二.操作步骤一.概述后端人员想在IDEA里面创建一个Vue的项目,但是这非常麻烦,用vscode这个前端专用软件创建就会非常快速. 操作的前提 1.安装vscode软件 ...
如何使用vue-cli来搭建vue项目？详细步骤跟着我来吧！
目录一.什么是vue-cli? 二.前提:搭建好NodeJS环境安装vue-cli 三.使用脚手架vue-cli(2.X版)来构建项目第一步第二步第三步第三步第四步三.SPA完成路由的 ...
Vue项目上线打包步骤
1.在vue.config.js中配置publicPath,只需给默认的添加一个"." {publicPath: './' } 2.在package.json中找打包命令,例如:b ...

Vue的基本使用步骤