Vue 基础入门 - 看这一篇就够了！！！

少则得，多则惑，其出弥远，其知弥少！

小白眼中的前端开发：

◆ 会写 HTML+CSS+JavaScript 就会前端开发
◆ 需要美化页面样式，就拽一个bootstrap过来
◆ 需要操作DOM或发起Ajax请求，再拽一个jQuery过来
◆ 需要快速实现网页布局效果，就拽一个Layui过来

实际前端开发：

◆ 模块化（js的模块化、css的模块化、资源的模块化）
◆ 组件化（复用现有的UI结构、样式、行为）
◆ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
◆ 自动化（自动化构建、自动部署、自动化测试

目录

Vue2.0-1 Vue简介

Vue2.0-2 Vue基本用法 初体验

Vue2.0-3 Vue六大指令

Vue2.0-4 综合案例

Vue2.0-5 入门总结

Vue2.0-6 过滤器

Vue2.0-7 侦听器

Vue2.0-8 computed计算属性(了解)

Vue2.0-9 axios专注数据请求

Vue2.0-10 vue-cli

Vue2.0-11 组件

Vue2.0-12 组件的props

Vue2.0-13 scoped属性解决 样式冲突

Vue2.0-14 组件的声明周期

Vue2.0-15 数据间传值

Vue2.0-16 $refs 引用

---

Vue2.0-1 Vue简介

① 官方概念：Vue是一套用于构建用户界面的前端框架。

√1、构建用户界面：用vue往html页面中填充数据，非常方便。

√2、框架：我们要学习Vue的指令、组件（是对UI结构的复用）、路由、vuex、vue组件库。

② vue的特性：数据驱动视图和双向数据绑定

特性	作用	说明
数据驱动视图	数据的变化会驱动视图自动更新	页面结构会被vue自动渲染
双向数据绑定	form表单负责采集数据，Ajax负责提交数据到js数据中	vue自动获取表单数据

③ MVVM是vue实现数据驱动视图和双向数据绑定的MVVM核心原理，它把每个HTML页面拆分成了三部分：

√1、Model： 表示当前页面渲染时所依赖的数据源

√2、View： 表示当前页面所渲染的DOM结构

√3、ViewModel： 表示vue实例，它是MVVM的核心

Vue2.0-2 Vue基本用法 初体验

 
     
      {{ message }} 

                   

Vue2.0-3 Vue六大指令

注意：指令是vue开发中最基础、最常用、最简单的知识点

序列	按照用途分类	命令
①	内容渲染指令	v-text="message"、{{ message }}、v-html="message"
②	属性绑定指令	v-bind:value="message" 简写用冒号:value="message"
③	事件绑定属性	v-on:click 简写用@click
④	双向绑定指令	v-model="message"
⑤	条件渲染指令	v-if="true"移除元素 v-show="false"修改display:none
⑥	列表渲染指令	v-for="(item,index) in list"

① 内容渲染指令

 
     
         
         

         
         
 {{ message }} 
         
         

    

    

② 属性绑定指令

{{ number + 1 }}
{{ ok ? 'yes' : 'no' }}
{{ message.split('').reverse().join('') }}

③ 事件绑定指令 事件修饰符 按键修饰符

 
 -1  {{ count }}  +3
 
 
 虽不传参，但默认会含有event参数
  $event 是vue提供的内置变量 固定写法 
 
 
 跳转到百度






  const vm = new Vue({
    el: "#app",
    data: {count: 0},
    methods: {
      sub(){ this.count-- ; },
      add(n){ this.count += n ; },
      changeColor(e){ e.target.style.backgroundColor = 'red'; },
      changeColor1(n,e){ e.target.style.backgroundColor = 'blue'; },
      show(){ console.log("事件修饰符，阻止a标签跳转"); }
    }
  })

---

事件/按键修饰符	说明（ 红色为常用事件 ）
.prevent	阻止默认行为（例如：阻止a连接的跳转、阻止表单的提交等）@click.prevent
.stop	阻止事件冒泡
.capture	以捕捉模式触发当前的事件处理函数
.once	绑定的事件只触发一次
.selt	只有在event.target是当前元素自身时触发事件处理函数
.enter（按键修饰符）	按下Enter键时触发相应功能 例如:@keyup.enter = "submit"
.esc（按键修饰符）	按下Esc键时触发功能 例如：@keyup.esc = "clearValue"

④ 双向绑定指令

 
 
   北京
   杭州
   苏州
 
 
 
 
data: {
  city: 2
}

---

v-model专用修饰符	作用	实例
.number	自动将用户的输入值转为数值类型
.trim	自动过滤用户输入的首尾空白字符
.lazy	在"change"时而非"input"时更新

⑤ 条件渲染指令

加油