初识Vue框架

库和框架

库：功能单一
比如jquery：只能操作节点,lodash,只能操作数组、字符串、函数等
以后项目中可以引入多个库
​
框架：针对我们的程序体提供一套完整的解决方案,功能多
以后项目中一般只能引入一套框架，比如要么是vue，要么是react
​
项目中引入框架后也能够引入其他库，比如echarts（数据可视化）

前端流行的三大框架

1 Angular  2009年  google
2 React    2013年  facebook     适合做大型项目（对优化有要求）
3 Vue      2014年  尤雨溪(负责人)  适合做中小项目(上手容易)---》多用于后台管理系统

官网

百度  vue.js

vue特点

1 渐进式    按需引入
2 版本分为： 2.x  和 3.x
3 核心思想：
    1 数据驱动 (数据来驱动页面的渲染)   ---》vue自带了一套响应式系统（数据一旦更改，页面会自动渲染）
    2 组件化（模块化）---vue是单页面应用(该项目只有一个index.html,该页面就是由一个一个的组件组成)----复用性
​

引入vue框架的方案

1 官网下载vue.js,自己在页面引入 (用于快速测试)
2 通过vue-cli 脚手架来安装 （推荐）
    脚手架分为：
        1 4.5以及4.5以上 （2.x、3.x）
        2 4.5以下  (只能玩2.x)
​

vscode插件推荐

vetur  让vscode识别vue语法（有了颜色、有提示了）
AutoFileName  路径提示
Vue 3 Snippets  v3的提示

全局下载vue脚手架

npm i  @vue/cli -g
如果报错：
npm i  ‘@vue/cli’ -g
​
查看版本：vue -V
​
vue 项目 底层是集成了webpack

创建vue2.x项目

1 
vue create 项目名   ---会在当前路径下创建
​
2 
​
​
  Default ([Vue 3] babel, eslint)    --快速创建v3  送了babel  eslint
  Default ([Vue 2] babel, eslint)    --快速创建v2  送了babel  eslint
> Manually select features   （自定义）
​
babel：高级语法转低级语法(ES6转->ES5)，为了让webpack能够识别
eslint： 约束插件      
​
​
3 
<enter> to proceed)
 (*) Babel  选择这一个即可
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
>( ) E2E Testing
4
? Choose a version of Vue.js that you want to start the project with 
  3.x
> 2.x
5 
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files  单独用一个文件来配置以上插件
  In package.json  把配置代码合并到  package.json
6 
 Save this as a preset for future projects? (y/N) n 是否保存当前所有选择，以便下次能快速创建项目
 

开服：

npm run serve

打包：

npm run build

项目结构：

public
	index.html: 默认页面(唯一的页面)
src
	assets:装图片的
	components(组件):装组件（*.vue文件）
	App.vue (入口组件)
	main.js（入口js） 首次访问时才会执行
.browserslistrc  :不同浏览器的兼容处理.比如初始化css等..（我们不用管）
babel.config.js  关于babel的配置 （我们不用管）
jsconfig.json  配置文件 （我们不用管）、
package.json 插件依赖
vue.config.js (类似于webpack.config.js,以后可以配置例如前端跨域的等)

解释 main.js

//引入第三方插件
import Vue from 'vue'
//引入入口组件
import App from './App.vue'

//关闭生产模式的信息打印
 Vue.config.productionTip = false

//实例化vue对象
new Vue({
  //render:渲染
  render: h => h(App),
  //mount:挂载 ，#app就是index.html中  <div id="app"></div>
}).$mount('#app')

组件

vue中的思想：整个项目都是由组件构成的

组件：*.vue文件，该文件中拥有 html、css、js

语法：

<template>
    <!-- html标签 -->
    <div>
        内容
    </div>
</template>


<script>
// js业务逻辑
export default {

}
</script>

<style>
/* 样式 */
</style>

注意：template下必须并且只能有一个根节点

组件的引入

步骤：

1 引入 import ... from '*.vue'   .vue可省 
2 注册 components注册
3 使用 当成标签来使用

demo：

<template>
    <div id="app2">
        app的内容
        <hr>
        <Father></Father> 
        <Mother/>
    </div>
</template>


<script>
//引入
import Father from './components/Father'
import Mother from './components/Mother'
export default {
  //注册
  components:{
      // 自定义标签  :  引入的组件对象
      Father,Mother
  }
}
</script>

<style>


</style>

vue中响应式数据 （data）

定义：

export default {
    data(){
        return {
            //设置想要渲染的数据
            name:"张三",
            user:{
                username:"aaa",
                password:"111"
            },
            arr:["1","a","b"]
        }
    }
}

注意：data中数据的取名不要以$或者_开头 （vue本身提供了大量的内置属性，这些属性都是以$或者_开头）

使用:

在template中 通过  {{data中定义的k}} 来进行渲染

注意：
1 {{}}只能用于标签中，不能用于属性
2 {{}}默认只能识别data中定义的k（变量），如果先要直接渲染常量，则添加''
  number和boolean例外
3 {{}} 支持一切运算符、api、模板字符串


          {{age+1}}
          {{age+'1'}}
          {{age>=18?'成年':"未成年"}}
          <hr>
          {{arr.filter(item=>item>=9)}} 
          <hr>
          {{'我的名字叫'+name+',今年'+age+'岁'}}
          <hr>
          {{`我的名字叫${name},今年${age}岁`}}

指令

vue提供了很多指令，这些指令都有各自的功能
语法: v-xx
位置：写在标签中，和属性是同级别;
<标签  属性=""   v-xx=""

v-on

vue提供了v-on来注册事件

语法：

<标签  v-on:事件="业务"
1 业务以后都是用函数来代表的，现在暂时用一下，这里的业务只能用于为data中的属性赋值
2 业务中也是可以直接获取data中定义的数据

demo： 点击按钮，name=张三改为李四

<template>
    <div id="father">

     {{name}}
     <button v-on:click="name='李四'">点击</button>
    
    </div>
</template>

<script>

export default {
    data(){
        return {
            name:"张三",
        }
    }
}
</script>

demo:点击按钮切换张三和李四

<template>
    <div id="father">
     {{name}}
     <button v-on:click="name=name=='张三'?'李四':'张三'">切换</button>
    </div>
</template>

<script>

export default {
    data(){
        return {
            name:"张三",
        }
    }
}
</script>

v-text和v-html

vue提供了以上两个指令用来设置标签体的内容

<标签>标签体</标签>

v-text 类似于  innerText   (不能识别标签)
v-html 类似于  innerHTML   (可以识别标签)

demo

<template>
    <div id="father">
     <span>我的名字叫{{name}}</span>
     <hr>
     <span v-text="'我的名字是'+name">哈哈哈</span>
     <hr>
     <span v-html="`我的名字是${name}`">哈哈哈</span>
    </div>
</template>

<script>

export default {
    data(){
        return {
            name:"张三",
        }
    }
}
</script>

{{}}、v-text、v-html区别：
v-html:识别标签，其余两个不行
{{}}：很灵活

v-show

用于元素的隐藏和显示

<标签 v-show="boolean类型"
如果值是true，则显示，反之隐藏

demo： 点击按钮，切换元素的隐藏和显示

<span v-show="isb">蜗牛</span>  
<button v-on:click="isb=!isb">切换</button>

export default {
    data(){
        return {
            isb:true,
        }
    }
}

v-if

用于元素的隐藏和显示
<标签  v-if="boolean"
如果值是true，则显示，反之隐藏

v-show和v-if的区别

相同点：都是用来隐藏和显示元素的
不同点：
  1 v-show通过css的display来控制，v-if通过是否渲染节点来控制（删除和追加节点）
  2 场景：经常频繁的切换一个元素的显示和隐藏，用v-show ,为了性能优化
  3 为了权限控制的安全性，应该采用v-if，而不是v-show(防止通过F12更改display)
  4 v-if功能更强(搭配v-else...)

v-else

v-else代表否则
1 必须搭配v-if
2 必须放在v-if的后面（紧挨着，中间不能有其他标签,v-else-if例外）

        <span v-if="isb">蜗牛1</span>  
        <span v-else>蜗牛2</span> 

v-else-if

1 必须搭配v-if
2 必须放在v-if的后面（紧挨着，中间不能有其他标签）

        <span v-if="false">蜗牛1</span> 
        <span v-else-if="false">蜗牛2</span> 
        <span v-else>蜗牛3</span> 

v-bind

该指令能够把标签原本的属性写活

< 标签  v-bind:标签本来的属性  

<font v-bind:color="color" v-bind:size="size" v-bind:face="face">蜗牛</font>
    data(){
        return {
            color:"red",
            size:10,
            face:"宋体"
        }
    }

作业1：

App.vue组件中引入并渲染MyDemo.vue和MyDemo2.vue
MyDemo.vue组件中引入MyDemo_son.vue
组件内容自拟

作业2：

看群

单词：

Property  属性
method 方法
instance 实例