Vue

vue

• 前端

  • app
    • Android：java
    • ios：object-c swift
  • pc
    • 浏览器：html css
    • 应用程序
  • 移动端
    • 浏览器：html css
    • 微信：小程序，小程序开发平台
    • 公众号：html css js
  • 混合式移动开发：开发一套程序，可以在不同的平台下运行，不仅是在pc端，还可以打包成app，微信小程序。
  • 前端框架：bootstrap,zui,layui,elemeui/jquery,vue.js,angular.js,node.js(服务器端脚本)
    混合式开发框架：react native/ionic/uniapp/flutter
    小程序：微信小程序，支付宝小程序

• 后端：

  • java/python/php/c#/c++

• vue.js

  • Vue.js 是一套响应式系统，前端开发库

  • Vue.js 是一套构建用户界面的渐进式框架

  • 提供双向数据绑定和组件化处理

  • vue动态根据变量变化而改变元素值的方式叫做响应式

  • 是一门框架，不是一门语言，就是js代表的项目本身，把所有的底层都封装了看不到将服务器的数据取出来渲染到客户端，不负责服务端

  • vue是mvvm模式

    • model：数据库 有服务器返回的或者前端拿到的数据
    • view：视图 界面就是html
    • vm：model-view关联这两个 怎么绑定m v；核心viewModel视图模型，主要控制视图跟数据之间的互动
      • 双向数据绑定：典型的mvvvm

  • var vm = new Vue({

    ​ el:"#app",

    ​ data:{

    ​ hi:"你好",

    ​ nums:{num1:1,num2:,num3:3},

    ​ },(等同于 data(){return{

    ​ hi:"你好",

    ​ nums:{num1:1,num2:,num3:3},}}),

    ​ methods:{

    ​ say(word){ console.log(111) }

    ​ 等同say:function(word){console.log(111)}

    ​ },

    ​ computed:{

    ​ 这里需要用方法的定义它，但是使用是用data的属性来使用(后面不需要加括号)，主要是监听里面的，一旦发生改变就 重新计算，不然只计算一次，页面打开那一次(调用了也只输出来一次)有缓存功能，也有方法的功能

    ​ },.....

    })

    • 方法数据之间想要互相调用就用this.就可以调用(这里的this就是指vm)
    • 数据里面跟方法里面的命名不能一样

  • JSON

    • 键值对：data:"值"，data :{name:"zhangsan",age:18,say:function(){console.log('hello')}}

  • axios

    • vue远程访问框架，用于获取服务器的数据，或者是和服务器进行交互。

• vue指令

  • {{}}插值表达式
    + 用来将方法或者变量直接渲染在页面上

    • v-html v-text

      • 类型于innerhtml、innertext
      • 作为子节点渲染出去
      • 《div v-html = "data里面的键"》

    • v-cloak 用来解决插值表达式闪烁问题

      • 在样式里面加[v-cloak]
      • 需要解决的标签往它里面加v-cloak
      • 这样渲染之前可以让元素隐藏掉，后面封装的在显示出来

    • v-for 遍历

      • v-for="item in 目标":key='item.id'
      • 需要系列号的:v-for=(item,index) in 目标:key='item.id'
        • index序列号从0开始 要放后面 不可以当key

    • v-bind绑定属性功能 把某一个标签绑定一个属性

      • v-bind:绑定的内容
        • v-bind:属性='data里面有的变量'
      • 缩写样式： 直接:绑定

    • v-on: 绑定事件 简写@ 一般用于方法

      • v-on:click="methods方法"
      • 绑定方法里面没有参数括号可以省略

    • v-if='内容'

      • 里面true就是显示，false就是不显示
      • 不显示是移除了，安全性更高，性能消耗大
      • v-else v-else-if
        • 《div v-if="num=1"》保存
        • 《div v-else》编辑
        • 用法跟if else一样

    • v-show='内容'

      • 里面如果是true就是显示 false就是不显示
      • 不显示就是display:none 注释了 性能消耗低

    • v-model='绑定的东西(num)'

      • 唯一一个可以实现数据进行双向绑定

    • watch 监视data里面的所有变量

      • watch里面有的data里面一定要有
      • watch:{
        监听的变量名字(变化前，变化后){}
        }
        例：hello(nval,oval)
        • 没有形参就是调用方法而已

• vue八大周期函数

  • 网页打开第一步是new vue这个时候没有生命周期，是new vue创建之后才进入
    • beforeCreate(){} vue实例创建前
      • data、methods没有东西 利用this调用不到
      • 里面还没有data、methods
    • created(){} vue实例创建后
      • 最早有data、methods的生命周期，还没有渲染上页面
      • 这是最早可以调用data、methods的最早状态
    • beforeMount(){} 数据、方法渲染前
      • 有闪烁，一开始看到大括号就是渲染前
      • 刚开始要将data、methods绑定到页面上。但还没有绑定
      • 内存里面挂在el，还看不到它
    • mounted(){} 数据、方法渲染
      • 大括号没了就说渲染后
      • 绑定之后，我们可以在页面看到vm里头的data、methods的最早状态
      • 页面挂在el了
    • beforeUpdate(){} 更新前
      • 内容改了，但页面还没有渲染，只是在内存里头
      • data数据是新的，页面效果是旧的
    • updated(){} 更新后
      • data、methods和页面都是新的
    • beforeDestroy(){}
      • vm实例销毁前，销毁 效果还没有出来
    • destroyed(){}
      • vm实例销毁后，彻底销毁了

• 组件

  • 组件也有生命周期，跟vm一样，但是没有el，有template也有data、methods

  • template标签底下只能有一个div标签作为根容器，div底下可以有很多标签

  • template要放到作用域外它不属于任何一个vm

  • 组件的定义

    • 全局定义

      • Vue.component('myheader',{template:"#header"})

      • Vue.component('my',{template:'#header',

        ​ data:{ count:0 } })

      • • myheader是自己定义的组件名
        • 后面的是跟自己书写的template标签进行绑定

    • 局部定义可以放多个

      • conponents:{

        ​ myheader:{template:"#header"},

        ​ myheader2:{template:"#header2"},

        }

    • 父 子组件

      • 父是vm实例
      • 子是components里面的
      • 之间的通信 传参
        • 子拿父的数据
          • 在父组件的标签里面绑定上去，给属性一个自定义属性名:要传的数据， 然后在子组件里面定义props来接收，props 的值可以是两种， 一种是字符串数组，一种是对象
          • 父例：<myfooter :自定义名字='父要传的数据'>
          • 子中:props{'自定义名字':类型}这里面无法被修改
            • 类型有array、string
        • 子拿父的方法
          • 在父组件的标签里面绑定上去，给一个自定义方法名，在子组件里面利用this.$emit('方法名',参数)
          • 例：<myfooter @自定义方法='要传的方法'>
        • 父调用子
        • 方法1：vm.$childrn[0].数据这是不常用的方法
        • 方法2：给子组件ref属性 ref='子组件的id'
          • 标识子组件用的
        • 在父组件里面vm.$refs.footer(子组件id).内容
        • 父子里面的this都可以共享$方法的
        • 共享的内容都是由Vue.prototype新增的

• 路由

  • 路由一定跟组件挂钩

  • 一个页面引入路由之后默认打开的时候hash就是/

  • 路由跟组件绑定五步

    • 第一步定义组件
      • 例： let login =
    • 第二步创建路由对象
      • const router = new VueRouter({
        routes:[{path:'/',redirect:''/login'},{path:'/page1',component:page1}]})
        • redirect是hash重定向，当hash是/就变成/login，避免同一个组件写多份
        • path后面的值就是hash值对应url的#后面的值
          • 当hash值跟当前的路由相等就在组件容器里头显示该组件
          • hash值匹配从上到下逐个匹配path，满足就返回 匹配不到就匹配*，一般都是放到最后面
    • 第三步路由注册
      • 把router放到vm里面
      • router:router
    • 第四步路由容器
      • 《router-view>
    • 第五步定义hash值
      • 通过《router-link to='/login'>登录
        • 里面的tag属性可以设置成别的标签
        • 改变hash的方式也发生了改变，变成了编程式导航（通过js来执行）来实现

  • 子路由

    • 当子路由显示的时候，那么他的父路由就会显示出来
    • 子路由是在组件里头，所以组件理由也要有《router-view>容器
    • 例 children:[
      {
      path:'red',
      component:sonred
      },
      {
      path:'green',
      component:songreen
      }
      ]
      • 在父路由里面定义
      • path里面加/是相对根目录 没加路径就是父路由+子路由

  • 路由的传参方式

    • path路由地址
    • this.$router操作路由（用于编程式导航）
    • this.$route获取路由
    • 占位符的方式
      • 会改变路由。少一个参数对应路由就不一样动态路由
      • 路由改变会99％导致组件重新渲染mounted
      • params存放数据路由定义的key为key
      • 可以不传但是/不可以省
    • 查询字符串方式
      • 不会改变路由 参数变化路由不变
      • query存放数据

  • 组件缓存下来，缓存路由 不刷新页面不会重新渲染

  • 路由知识

    • 在vue中如何支持路由：
      1、引入相关文件
      2、添加路由链接
      3、添加路由填充位
      4、定义路由组件
      5、创建路由规则并创建路由实例
      6、把路由挂载到vue根实例中

      声明式导航：是指用户通过点击链接完成导航的方式，比如点击a标签或者路由链接完成的跳转。
      编程式导航：就是跳转是因为我要点击它，而不是链接，而是它在javascript中调用了某个api完成了跳转。

      主要的编程式导航的API
      this.$router.push('要跳转的地址');
      this.$router.go(n);

• 脚手架

  • vue脚手架CLI
    node.js
    java工程要运行，运行在window系统和linux系统，需要（jvm-虚拟机）才能运行.class文件
    vue前端程序需要运行在不同系统上，也需要一个工具-node.js。能够屏蔽不同系统的差异。

    npm：node package manager，包管理工具：主要用于管理前端项目中引入的不同包，比如jquery，bootstrap，axios。可以解决js包之间的依赖。和java中的maven类型，用于jar包管理。

    vue-CLI工程结构：
    src：源代码目录
    assets：资源目录，用于存放图片、样式等资源文件
    components:组件目录，用于存放公共的组件
    views：存放视图
    app.vue:入口组件，项目启动后，自动会被加载的vue组件。
    main.js:入口首页的js文件，声明路由等
    router:index.js 配置路由规则

    public:index.html工程首页
    index.html引入main.js
    main.js调用了app.vue入口组件-调用了Helloworld.vue组件

    如何运行：
    1、编译工程：选定项目-右键-外部命令-npm run build
    2、运行工程：选定项目-右键-外部命令-npm run server

    在组件中的：export default是表示用次方法声明的组件可以被其他组件引用。

    新建vue工程的步骤：
    1、打开hbuilderx创建一个新项目
    2、在模板选择vue项目-vue-cli默认项目
    3、创建好后，需要等待构建工程
    4、右键选择项目-外部命令-npm run build构建项目
    5、右键选择项目-外部命令-npm run serve 运行服务器
    6、在运行的底部找到服务器的地址和端口号
    7、在浏览器中输入服务器的地址和端口号，即可运行

    ctrl+c终止程序运行，
    在命令窗口下，运行npm run serve将服务器再次启动。

  • package.json里面

    • build意思是vue项目都开发完毕了，要打包部署到生产环境的时候用：npm run build
    • serve平常开发的时候用，npm run serve自动启动，并暴露它的监听窗口给你
    • dependencies 依赖
    • devDependencies 安装依赖
    • browserslist 配置
      • 兼容市场份额达到1%以上的浏览器
      • 只兼容浏览器最新的两个版本
      • 没有死掉的浏览器

  • public静态文件夹

    • 存放静态文件用的，放在里头的文件是不会被编译的，会原汁原味的被打包
    • 里面的index是整个文件的入口文件，空h5模板，在npm run build的时候，vue会自动借助webpack将打包好的资源以link或者是script的方式嵌入到index里头

  • src是整个项目的核心内容前端的所有内容都在这边开发

    • assets 放静态资源 图片图标
    • components 子组件
    • views大的子组件，理论上包含com的

  • App.vue根容器，里面只有router-view将每个页面的标签嵌入进来

  • main.js灵魂

    • new Vue({
      router,
      store,
      render: h => h(App)
      }).$mount('#app')// vue2.6.5才有使用document渲染之前用el
      // render: h=>h(App)

      经过三个步骤变化

      // render:function(h){return h(App)}
      // render:h=>{return h(App)}
      // render:h=>h(App)

    • 安装类的模块，引用的时候，需要省略路径

    • 非安装类的模块，既自定义模块，在引用的时候需要加上路径

  • @是vue里头预置的一个关键字，用来表示src 根目录src

• 题目

  • 闰年：被4整除不能被100整除或者能被400整除
  • 书的单价、数量。点击计算按钮后，显示出书的总价。
    • 获取数据啥的就用this.
  • 在网页上输入5个科目的成绩，计算出平均值（保留一位小数），总值。
    • 转成整数用函数parseInt(),设计到计算的最好写在computed里面
    • num.toFixed(n) n代表要保留几位小数
  • 按钮控制图片显示隐藏
    • 
    • 用到了属性绑定，给文本输入框设置默认值
    • v- bind: 简写 : v-on: 简写@
  • 输入框添加，点击删除
    • 
    • repalaceAll(' ',")把空格去掉 All就是把所有的都替换
    • @keyup.enter="方法1" 就是敲击回车键盘调用了方法1
    • splice(index,num) 删除从index位置开始的数，num为删除的个数,若 num小于等于 0，则不删除
      • splice(index)删除从index后面的所有元素包括自己，若index小于0则删除最后index个数
      • splice(index,num,"添加num1","添加num2") 后面两个是要添加的数
    • push数组添加方法到数组列表最后一个,unshift添加到第一个
  • 选水果
    • 
    • includes() 方法用于判断字符串是否包含指定的子字符串，或者判断数组中是否有指定的元素
  • 查找方法
    • 
    • filter过滤器，对数组中的每个元素都会执行这个函数，返回真，元素则被保存
    • indeOf(xxx) 返回某个指定的字符xxx在某个字符串中首次出现的位置。如果没有找到就返回-1
    • return item.bookName.match(searchStr)也可以
  • 页面增删改查
    • 
    • 增加push()、unshift() 删splice
    • 
    • 查都是用filter过滤器 match在字符串内检索指定的值