本文参考vue官网文档和尚硅谷Vue网络课程，加入了一些自己的理解，如果觉得我说得麻烦也可以直接去vue官网看文档和尚硅谷视频

第一章 Vue介绍

1.1 什么是Vue

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（照搬vue官网，官网说的很全可以直接去查文档）

1.2 Vue 的特点

1. 遵循 MVVM 模式

2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.3 Vue常用的周边库

1. vue-cli: vue 脚手架

2. vue-resource

3. axios

4. element-ui: 基于 vue 的 UI 组件库

5. vue-router: 路由

6. vuex: 状态管理

第二章 Vue起步

2.1Vue的安装

进入Vue官网介绍 — Vue.js

点击安装会跳转到这个页面

初学建议安装开发版本

开发版本和生产版本的区别：

开发版本容量会大一些，但是会附带警告和调试模式；

生产版本容量会小一些，一般都是调试完代码之后再使用生产版本；

我们学习的过程中建议使用开发版本

下载完成之后我们会得到一个vue.js文件

这个文件就是Vue框架了

如果想使用vue的话我们需要把这个文件引入到我们的文件中（引入方法如下）

<!-- 引入Vue -->
<script src="../js/vue.js"></script>

这样引入Vue文件之后我们就可以进行Vue操作了

2.2 Vue插值表达式的使用

（此节我们正式学习Vue的操作和语法）

插值表达式

功能：

1.用于解析标签体的内容

2.语法：语法: {{xxx}} ，xxxx 会作为 js 表达式解析

定义：使用{{ }}的形式将数据显示在页面中

<div>{{msg}}</div>

我们先在body中创建一个容器如下图

<!-- 准备好一个容器 -->
<div id="demo"><h1>Hello，{{name}}，{{address}}</h1></div>

（此容器为模板）

{{name}}和{{address}}为插值

插值语法可以让我们把任意数值或文字传给{{name}}和{{address}}使他们在页面中显示

在进行传值之前我们需要创建一个Vue实例

如下代码为创建Vue实例的方法

//创建Vue实例
new Vue({
})

Vue实例中我们需要设置几个属性

//创建Vue实例
new Vue({el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。name: 'LMMMH',address: '哈尔滨'}
})

如上代码为我们需要的Vue实例和属性

其中有两个类似对象的属性

el属性

el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。

（其用法我们可以理解为原生Js中的document.querySelector('#demo')）

这里的el有两种写法，我们以后会说到

data属性

data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。

若想要把自己定义的值传到{{}}中我们需要在data:{}中设置我们想要传输的值

例：我们想要让{{name}}变成LMMMMH在页面中显示那我们在设置模板的同时还要在data{}中创建一个name:''把值设置为LMMMMH

详情为如下代码

//创建Vue实例
new Vue({el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。name: 'LMMMH',address: '哈尔滨'}
})

这里的data{}也有第二中写法我们同样以后会说到

这样设置好我们打开页面就会发现原本{{name}}和{{address}}的位置已经变成我们设置好的值了

此专栏持续更新

如有说的不清楚的地方欢迎指正

Vue.js从入门到“卸载” Vue教程相关推荐

【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言本文完全基于参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
关于node.js 和vue.js的安装、卸载、浏览器测试问题？
关于node.js 和vue.js的安装.卸载.浏览器测试问题? 最近忙于深入研究vue.js框架的适用问题,所以顺带也有必要系统的研究一下node.js是怎么一回事?! 闲话不多说,直接上文章链接: ...
Vue.js 2 入门与提高（一）
2019独角兽企业重金招聘Python工程师标准>>> ** Vue.js -- 渐进式前端框架 ** Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前 ...
[Vue.js 1] 入门基础知识与开发
最近接触的几个项目框架全部用到了Vue.js技术,没办法只能对vuejs进行深入学习,不过可喜的是Vue.js学习路线非常快,上手也是非常快的,所以对于前端开发也是主流的开发框架了.不过其中的js部分 ...
Vue.js快速入门之八：实现登录功能
系统登录是指用户必须提供满足一定条件的信息后,才可以进入系统.最早系统一般是指用户名和密码,如今,登录方式已多元化,系统一般登录方式有:用户名+密码.二维码扫码登录.第三方授权登录.手机号+短信登录等 ...
【尚硅谷】Vue.js从入门到精通笔记
目录第1章:Vue核心 1-1.Vue简介 1-1-1.什么是Vue 1-1-2.Vue的特点 1-1-3.搭建Vue开发环境 1-1-4.创建Vue对象 1-2.模板语法 1-3.数据绑定 1-4 ...

Vue.js从入门到“卸载” Vue教程