Vue全套精品课笔记

Vue全套精品课笔记

Vue官方文档：https://cn.vuejs.org/v2/guide/syntax.html

1. Vue环境搭建

（1）为什么用框架（Angular,React,Vue)

很多业务逻辑移动到前段实现，Javascript文件会 越来越多，处理也胡变得更加复杂

（2）为什么选择Vue

1.渐进式框架
2.双向数据绑定
3.不需要操作DOM，状态机，状态的改变会引起试图的更新
4.Vue不仅仅可以构建整个大型应用，还可以作为一个项目的某一个功能实现
5.Vue环境构建非常方便，vue-clie指令
6.Vue单文件组成，组件化开发
7.社区非常强大，提供各种各样的插件供我们使用

（3）安装

• 下载并安装nodejs：http://nodejs.cn/download/
• 安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
• 安装vue脚手架：npm install --global vue-cli

要安装vue-cli（可以不用安装vue），不然提示vue不是本地命令

（4）新建项目

• 初始化项目
  vue init webpack my-project
• 填写项目信息
  • Project name vb
  • Project description A Vue.js project
  • Author hanzhichao
  • Vue build standanlone
  • Install vue-router No
  • Use ESLint to lint you code No
  • Set to unit test No
  • Setup e3e tets with Nightwatch No
  • Yes use NPM
• 安装依赖
  cd my-project
  npm install
• 运行开发环境
  npm run dev

什么是npm？
npm是随同Nodejs一起安装的包管理工具，能解决Nodejs代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

什么是webpack？
webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
https://www.cnblogs.com/-walker/p/6056529.html

2. Vue项目结构

入门示例

** main.js入口解释**
src/main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false  // 生产环境配置提示

new Vue({
   
  el: '#app',  // 绑定根视图
  components: {
    App },  // 加载组件
  template: '<App/>'  // 使用组件

模板语法

• 文本：模板 { { 变量 }} （Mustache语法 ）
• 原始html：v-html="变量" 可以解析DOM

示例：
src/App.vue

<template>
  <div id="app">
    {
  { demo }}  <!--只能展示文本-->
    <div v-html=