vue初体验

    • vue是什么
    • 学习Vue前的准备
      • IDE
      • node.js
      • 调试环境
      • 工程环境
    • vue框架常用知识点
      • 模板语法
      • 计算属性和侦听器
      • 条件渲染、列表渲染、Class与Style绑定
    • vue核心技术
      • 认识vue-cli
      • 组件化思想
      • vue代码规范
      • vue-router
      • vuex
      • 如何进行调试

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。

学习Vue前的准备

IDE

	·WebStorm （付费，可申请试用）
	·VScode	（免费）

node.js

	npm --version
	node --version
	上述命令查询版本号，若查询不到则进行安装。
	nvm    （node.js版本管理工具，处理不同版本之间前端依赖库之间的问题）
		nvm ls						查询现在所使用的node版本
		nvm ls-remote				查看远端服务器有哪些node版本
		nvm install （版本号）		安装你想要的版本
	使用淘宝镜像可加快访问速度

调试环境

		建议使用五大浏览器中的chrome作为调试工具，可以下载谷歌自带的调试插件会很方便的查看vue的组件以及vuex。（Vue.js devtools）

工程环境

	vue cli
		npm i -g vue-cli		
		可使用vue-cli进行项目的搭建

vue框架常用知识点

模板语法

.vue文件结构

<template>
    <div>
       
    </div>
</template>

<script>
    export default {
        name:"",
        
        props: {

        },
        components: {

        },
        data(){
            return {
                
            }
        },
        methods: {

        }
    }
</script>

<style lang="scss">

</style>

{{		}}				文本插值
v-html					输出原始html
v-bind					属性绑定（缩写为：）
v-on					事件绑定（缩写为@）
v-for					基于数据多次渲染组件
v-model					在表单控件或组件上实现双向绑定
v-once					只渲染组件或元素一次
v-show					根据表达式的值切换display中的显示隐藏属性
v-if	v-else-if	v-else
根据表达式中的值在dom中创建和销毁元素

计算属性和侦听器

computed				计算属性(自动监听依赖值的变化，从而动态返回内容)
watch					侦听器(是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情)


注：知乎详细介绍

条件渲染、列表渲染、Class与Style绑定

1.条件渲染
	v-if	v-else-if	v-else		指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
	v-show							用于根据条件展示元素,带有 v-show 的元素始终会被渲染并保留在 DOM 中.
2.列表渲染
	v-for							基于一个数组来渲染一个列表。
	v-for="(item,index) in items"也可用of代替in，尽可能在使用 v-for 时提供 key attribute。
3.class与style绑定
	除了在元素上写固定的class外，我们还可以使用v-bind为元素绑定动态的class。
	同样，也可使用v-bind为元素绑定一个样式对象，这会让模板更加清晰。

vue核心技术

认识vue-cli

安装vue-cli		npm install -g @vue/cli
创建项目
1.使用vue-cli创建项目			
	首先打开命令行，进入自己想要创建项目的文件目录，然后使用命令"vue create 项目名称"，可以选择默认创建也可手动创建提前添加自己需要的组件 。
2.使用可视化界面
	命令行输入"vue ui",接下来在浏览器中按照自己的想法创建项目。
	
项目目录

|-- api                            // 项目接口定义
|
|-- build                            // webpack配置文件
|
|-- config                           // 项目配置文件
|
|-- dist                            // 项目打包文件
|
|-- timecat                          // 上线项目文件，放在服务器即可正常访问
|
|-- screenshots                      // 项目截图
|
|-- src                              // 源码目录
|   |-- assets                       // 项目公共资源
|   |-- components                   // 组件库
|   |-- pages                        // 项目页面模块
|   |-- router                       // 路由文件
|   |-- service                      // Mock数据
|   |-- store                        // vuex的状态管理
|   |-- style                        // 各种样式文件
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|
|-- static                          //一些静态资源，不会被webpack编译
|
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 代码编写规格
|-- .gitignore                       // 忽略的文件
|-- favicon.ico                      // 页面左上角小图标
|-- index.html                       // 入口html文件
|-- package.json                     // 项目及工具的依赖配置文件
|-- README.md                        // 说明

组件化思想

什么是组件化思想
	独立的可复用的一个功能模块，其包含了这个模块的整个架构、布局以及逻辑。
为什么要组件化
	组件化可以实现功能模块的复用，不需要重复编写，提高效率，在做复杂的单页面应用时，可以很好的通过组件化的思想进行拆分。
如何进行拆分
	首先是多次进行复用的组件，其次有300行原则，就是结构、布局和逻辑总共不超过300行。

vue代码规范

好习惯，少走坑
写出自己看得懂的代码
写出别人看得懂的代码

官方文档 风格指南

vue-router

router-link				组件 <router-link>来创建链接。
router-view				组件<router-view> 将显示与 url 对应的组件
路由作为单页面应用中的重点，需详细观看官方路由文档。

官方文档：vue-router

vuex

什么是vuex
	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
什么情况使用vuex
	1.多个视图依赖同一状态（例：菜单导航)
	2.来自不同视图的行为需要变更同一状态（例：评论弹幕，购物车）

官方文档：vuex

如何进行调试

	vue的Chome插件
	console.log
	alert
	debugger
	浏览器控制台中找到源代码，在需要调试的行号上打点然后刷新页面

更多推荐

vue初体验