Vue入门

vue.js : 前端开发框架，三大功能：模板渲染、模块化、扩展功能（路由、Ajax）

渲染：通过js把数据传到html中

模块化：定义组件，将前端分割成几个模块

路由：通过单击按钮实现组件的切换

 

#vue.js中文教程 https://cn.vuejs.org/v2/guide/

#vue.js源码 https://github.com/vuejs/vue

#vue.js其他扩展工具的源码 https://github.com/vuejs

#vue.js官方论坛 https://forum.vuejs.org/

 

Q:node.js和vue.js的区别

A: 两者是完全不同的东西。

 node.js是JavaScript的运行环境，实质是对Chrome v8引擎进行了封装，起初JavaScript只能在浏览器中执行， 由于node.js的封装，使得JavaScript能在非浏览器环境下运行。

vue.js则是前端开发框架。

 

#安装方式

1）通过<script>标签引入vue.js文件

vue.js有两个版本，开发版本（用于开发）和生产版本（删除了开发版本的一些内容（警告信息等），更加简洁高效）

引入又包括：下载后通过本地文件引入和cdn引入

2）使用命令行工具CLI

 

# 编辑器使用 HBuilderX

下载链接 https://www.dcloud.io/hbuilderx.html

HBuilderX 入门教程 https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/35357

 

观看 vue.js中文教程 https://cn.vuejs.org/v2/guide/ 中的任意一个视频，在视频结束时会弹出如下弹窗，可使用HBuilderX打开课程源码进行实践

 

 

#主要概念

全局API ：Vue提供的全局方法，例如 Vue.component() 、Vue.set()

实例选项：vue实例的选项，例如 el、template、data

实例属性/方法：以$开头的属性或方法，例如 (vue实例 root) root.$data 、 root.$on()

指令：v-on 、 v-html等

内置组件：vue提供的组件，可在html中通过标签使用

 

以上概念的具体内容可在官网的API中查看

 

 

 

按教程进行顺序学习

 

#声明式渲染

通过声明vue实例，在vue实例中给变量赋值，将数据传递到html的DOM元素中（挂载）

1）指令：

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute （v-bind）

{{ rawHtml }}  和 v-html="rawHtml" 调用变量的结果有所不同，如果变量是html语句，前者直接输出变量值，后者以html效果输出

2）双花括号内可以是变量、算术表达式、函数调用等内容

 

Q: 对代码进行修改后，内置浏览器效果没有变化

A：对代码进行修改后需ctrl + S 对内容进行保存

 

#条件渲染

1）按F12进入开发者工具-->console ,输入代码可对网页进行临时修改

如：app4.todos.push({ text: '新项目' })

 

#处理用户输入

1）用 v-on 指令添加一个事件监听器

2）v-on:click 与 @click 作用相同

 

#组件化应用构建

1）组件是可复用的vue实例

2）html中通过标签的形式使用组件，标签名即组件名

3）组件的模板template必须要有一个根节点

4）组件之间可以嵌套使用

5）组件可以通过Vue.component()定义（全局定义），也可以在vue实例的components：{}中定义（在vue实例中局部定义）

6）组件中data数据要避免直接赋值引用，一般通过function（）引用

 

#mvvm模型

 

#vue-cli 优势

1）自动生成成熟的项目架构

2）有本地测试服务器

3）可集成打包上线

 

#安装vue-cli

1)下载node.js

2)设置node.js和npm的环境变量

3）下载git命令行工具 : 让命令跟接近于Liunx命令

 

4）打开git，输入

npm install vue-cli -g

 

#新建项目

vue init webpack vuedemo
cd vuedemo
npm install
npm run dev

 

Vue+springboot实战教程

https://learner.blog.youkuaiyun.com/article/details/88926242?tdsourcetag=s_pctim_aiomsg

基于 Vue 2.0 的桌面端组件库

https://element.eleme.cn/#/zh-CN