Vue入门到精通—动态组件和插槽
动态组件动态组件指的是动态切换组件的显示与隐藏。
实现动态组件渲染vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染。
示例代码：
123456789101112131415<script> // 1.当前要渲染的组件名称 return { comNmae: 'Left' }</script><template> // 2.通过is属性，动态指定要渲染的组件 <component :is="comName"></component> // 3.点击按钮，动态切换组件的名称 <button @click="comNmae = 'Left'"> 展示Left组件 </button> <button @click=& ...
Vue入门到精通—Ref引用
ref引用ref用来辅助开发者在不依赖于jQery的情况下，获取DOM元素或组件的引用。
每个vue组件实例上，都包含一个$refs对象，里面存储着DOM元素或组件的引用。
默认情况下，组件的$refs指向一个空对象。
使用ref引用DOM元素示例代码：
123456789101112131415<template> <h3 ref="myh3">MyRef组件</h3> <button @click="getRef">获取$ref引用</button></template><script> methods: { getRef() { 通过 this.$refs.引用名称 可以获取到DOM元素引用 console.log(this.$refs.myh3) //操作DOM元素 this.$refs.myh3 ...
Vue入门到精通—生命周期和数据共享
生命周期生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的一个时间段。
生命周期函数：是由Vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
注意：生命周期强调的是时间段，声明周期函数强调的是时间点。
数据共享项目开发中，组件间最常见的关系分为如下两种：
父子关系
兄弟关系
父子之间数据共享父子之间数据共享又分为：
父 -> 子 数据共享
子 -> 父 数据共享
父组件向子组件共享数据父组件向子组件共享数据时，需要使用自定义属性。
123456789<script> //父组件 <Son :msg="message" :user="userinfo"></Son> data() { message: 'hello, vue.js', userinfo: { name: 'zs ...
Vue入门到精通—Vue组件
Vue组件组件化开发组件化开发：根据封装的思想，把页面上可重用但是UI结构封装为组件，从而方便项目开发和维护。
vue中的组件化开发vue是一个支持组件化开发的前端框架。
vue中规定：组件的后缀名是.vue，之前接触到的App.vue文件本质上是一个vue组件。
vue组件的三个组成部分每个.vue组件都由3部分组成：
template： 组件的模板结构
script： 组件的JavaScript行为
style： 组件的样式
其中，每个组件必须包含template模板结构，而script行为和style样式是可选部分。
templatevue规定：每个组件对应的模板结构，需要定义到<template>节点中。
123456<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg ...
Vue入门到精通—vue-cli
Vue-clivue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。
单页面应用单页面应用程序（SinglePageApplication, SPA)，指的是一个web网站中只有唯一一个HTML页面。
所有的功能与交互都在这唯一的一个页面内完成。
安装和使用vue-cli是npm上的一个全局包，使用npm install命令，即可方便的把它安装到自己电脑上：
1npm install -g @vue/cli
基于vue-cli快速生成工程化的Vue项目：
1vue create [项目的名称]
vue项目的运行流程在工程化的项目将中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html指定区域中。
其中：
App.vue用来编写待渲染的模板结构
index.html中需要预留一个el区域
main.js把App.vue渲染到了index.html所预留的区域中
Vue入门到精通—计算属性
计算属性基本用法计算属性指的是通过一系列运算后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods方法使用。
代码示例：
123456789101112const vm = new Vue({ el: '#app', data: { r: 0, g: 0, b: 0 }, computed: { rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})`} }, methods: { show() { console.log(this.rgb) } }})
计算属性的特点
虽然计算属性声明时被定义为方法，但是计算属性的本质是一个属性。
计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行计算。
Vue入门到精通—侦听器
侦听器基本用法Watch侦听器允许开发者监视数据变化，从而针对数据的变化做出特定的操作。
代码示例：
12345678910111213141516171819202122<body> <div id='app'> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { username: '' }, watch: { // 监听username值的变化 // newVal是变 ...
Vue入门到精通—过滤器
过滤器过滤器（Filters）是Vue为开发者提供的功能，常用于文本格式化。
过滤器可以用在两个地方：插值表达式 和 v-bind属性绑定。
过滤器应被添加在JavaScript表达式的尾部，由“管道符”进行调用。
示例代码：
1234567<div id='app'> <!-- 在双花括号中通过“管道符”调用capitalize过滤器，对message的值进行格式化 --> <p>{{ message | capitalize }}</p> <!-- 在 v-bind 中通过“管道符”调用 formatId 过滤器，对rawId的值进行格式化 --> <div v-bind:id="rawId | formatId"></div></div>
定义过滤器在创建Vue实例时，可以在fliters节点中定义过滤器。
示例代码：
1234567891011121314151617181 ...
Vue入门到精通—Vue基本语法指令
Vue指令Vue中的指令按照不同用途分为下列6种：
内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令
内容渲染指令内容渲染指令用于渲染DOM元素的文本内容，常用指令有如下3个：
v-text
{ { } }
v-html
v-textv-text会将变量的值覆盖标签内的文本。
12345678910111213141516<body> <div id='app'> <p v-text="username">我会被username变量的值覆盖</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', ...
Vue入门到精通—安装Vue调试工具
安装Vue调试工具vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。
在线安装Chrome 浏览器在线安装 vue-devtools ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
配置vue-Devtools点击 Chrome 浏览器右上角，选择更多工具 -> 扩展程序 -> Vue.js devtools详细信息。
勾选如下两个选项：
使用vue-devtools安装完成并配置好后，当访问vue页面时，按F12即可找到Vue选项卡。
