Vue基础知识概括

vue是什么

1. vue是一个渐进式JavaScript框架

vue 特点

1. 遵循mvvm模式
2. 编码简介，体积小，运行效率高，适合移动，PC端开发
3. 他们身只关注UI，可以轻松引入vue插件或第三方库开发

与其他前端JS框架的关联

1. 借鉴angular的模板和数据绑定技术
2. 借鉴react的组件化和虚拟DMO技术

VUE扩展插件

1. vue-cli：vue脚手架
2. vue-resource（axios）：ajax请求
3. vue-route：路由
4. vuex：状态管理
5. vue-lazyload：图片懒加载
6. vue-scroller：页面滑动相关
7. mint-ui：基于vue的UI组件库（移动）
8. element-ui：基于vue的UI组件库（PC端）

VUE基本使用

helloWord

  
  







  

  
  
hello {{msg}}

理解vue的MVVM

model：模型，数据对象

view：视图，模板页面

viewModel：视图模型(vue实例)

模板语法

  
  





  
1. 双大括号表达式
  
{{content}}
  
{{content.toUpperCase()}}

  
2. 指令一: 强制数据绑定
  访问指定站点

  访问指定站点2

  访问指定站点2


  
3. 指令二: 绑定事件监听
  点我
  点我

计算属性和监视

计算属性，监视，set，get

  
  




  姓: 

  名: 

  
  姓名1(单向): 

  姓名2(单向): 

  姓名3(双向): 


  
{{fullName1}}
  
{{fullName1}}

class 与 style 绑定

样式绑定

  
  
  






  
1. class绑定: :class='xxx'
  
xxx是字符串
  
xxx是对象
  
xxx是数组

  
2. style绑定
  
:style="{ color: activeColor, fontSize: fontSize + 'px' }"

  更新

在应用中，绑定元素样式的变化

class 与 style 是专门做样式绑定修改

条件渲染

条件渲染

  
  





  
表白成功
  
表白失败

  

  
求婚成功
  
求婚失败

  切换

v-if 节点删除与新增

v-show 节点隐藏与显示

列表渲染

列表渲染

  
  






  
测试: v-for 遍历数组
  

    

      {{index}}--{{p.name}}--{{p.age}}
      --删除
      --更新
    
  
  添加

  
测试: v-for 遍历对象

  

    
{{key}}={{item}}
  

过滤与排序

  
  





  
  

    

      {{index}}--{{p.name}}--{{p.age}}
    
  
  

    年龄升序
    年龄降序
    原本顺序
  

事件处理

事件处理，绑定监听，事件修饰符，按键修饰符

  
  






  
1. 绑定监听
  test1
  test2
  test3

  
2. 事件修饰符
  百度一下
  

    

  

  
3. 按键修饰符
  
  

表单数据自动收集

text，textarea

CheckBox

radio

select

  
  




  

    用户名: 
    


    密码: 
    


    性别: 
    
    女
    
    男


    爱好: 
    
    篮球
    
    足球
    
    乒乓


    城市: 
    
      未选择
      {{city.name}}
    

    介绍: 
    



    
  

VUE生命周期

生命周期图示

批量内存解析DOM，统一解析之后呈现，减少更新次数

初始化阶段

1. beforeCreate
2. created
3. beforeMount
4. mounted

更新阶段

1. beforeUpdate
2. updated

死亡阶段

1. beforeDestroy
2. destroyed

常用方法

1. mounted：ajax数据获取
2. beforeDestroy：清除定时器
3. vue生命周期

  
  





  destory vue
  
尚硅谷IT教育

动画

操作css的trasition 或 animation

vue会给目标元素添加/移除特定css

过渡的相关类名

1. xxx-enter-active：指定显示的transition
2. xxx-leave-active：指定隐藏的transition
3. xxx-enter/xxx-leave-to：指定隐藏时的样式

动画

  
  
  







  Toggle
  
    
hello
  




  Toggle2
  
    
hello
  

过渡

  
  
  




  Toggle show
  

  
    
Lorem
  

在目标元素外包裹

定义class样式

1. 指定过渡样式：transition
2. 指定隐藏时的样式：opacity/其他

过滤器

过滤器

  
  





  
显示格式化的日期时间
  
{{time}}
  
最完整的: {{time | dateString}}
  
年月日: {{time | dateString('YYYY-MM-DD')}}

定义过滤器

使用过滤器

指令

常用内置指令

1. v:text：更新元素的textContent
2. v-html：更新元素的innerHtml
3. v-if：如果为true，当前标签才会输出到页面
4. v-else：如果为false，当前标签才会输出到页面
5. v-show：通过控制display样式来控制显示/隐藏
6. v-for：遍历数组/对象
7. v-on：绑定事件监听，一般简写为@
8. v-bind：强制绑定解析表达式，可以省略v-bind
9. v-model：双向数据绑定
10. ref：指定唯一标识，vue对象通过$els属性访问这个元素对象
11. v-cloak：防止闪现，与CSS配合：【v-cloak】{display：none}

自定义指令

全局指令：v-my-directive='xxx'

 Vue.directive('upper-text', function (el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })

局部指令：v-my-directive='xxx'

directives : {
  'my-directive' : {
    bind (el, binding) {
      el.innerHTML = binding.value.toupperCase()
    }
  }
}

插件

声明使用插件(安装插件: 调用插件的install())

内部会调用插件对象的install()

// 声明使用插件(安装插件: 调用插件的install())
  // 内部会调用插件对象的install()
  Vue.use(MyPlugin)
  const vm = new Vue({
    el: '#test',
    data: {
      msg: 'HaHa'
    }
  })
  Vue.myGlobalMethod()
  vm.$myMethod()
(function (window) {
  const MyPlugin = {}
  MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('Vue函数对象的myGlobalMethod()')
    }

    // 2. 添加全局资源
    Vue.directive('my-directive',function (el, binding) {
      el.textContent = 'my-directive----'+binding.value
    })

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {
      console.log('vm $myMethod()')
    }
  }
  window.MyPlugin = MyPlugin
})(window)

vue-client创建项目

vue-client 是 vue官方提供的脚手架工具

创建vue项目

npm install -g vue-cli

vue init webpack xxxx(项目名)

npm install：加载依赖

npm run dev：运行项目

项目打包

npm run build

静态服务器运行打包文件

1. 安装 npm i -g serve
2. serve dist

动态服务器（Tomcat）

1. 增加配置：publicPath
2. 拷贝构建好的文件夹放入Tomcat的webapps目录下

eslint

1. ESLint 是一个代码规范检查工具
2. 当违背特定规则，会做出相对应的提示