初识Vue

vue

• 基本概念

  • 它是一个实现了 MVVM 思想的框架，
  • 学完 vue 之后基本上就告别了 dom 操作

• 插值表达式：

  • {{ }}

• vue 的指令

  • v-html & v-text
    • 都可以将数据渲染到标签之中
    • v-html 可以识别标签， v-text 无法识别标签
  • v-if & v-show
    • 都可以让元素显示和隐藏
    • v-if 通过直接将元素在 dom 中进行移除， v-show 通过 display 来使用元素隐藏和显示
  • v-for
    • 遍历数据
  • v-on
    • 绑定事件
    • 简写@
  • v-bind
    • 绑定属性
    • 简写 :
  • v-model
    • 双向绑定数据
      • 当 M 改变时，V 会自动改变
      • 当 V 改变时，M 也会自动改变
  • ....

• vue 实例中的成员

  • el：

    • 设置视图渲染的容器

  • data：

    • 定义数据

  • methods：

    • 定义方法

      • methods 中定义的方法不能使用箭头函数

      • 在 methods 中方法中的函数最好使用箭头函数

        var vm = new Vue({
        	el: '#app',
        	data: {
              msg: '今天是个好日子'
        	},
        	methods: {
        		myclick: function() { // 这个函数绝对不能是箭头函数
        			setTimeout(() => { // 这个函数一定要是箭头函数
                      console.log('11111')
        			}, 2000)
        		}
        	}
        })
        

• $ref

  • 使用 vue 中的方式来操作 dom

• 计算属性

  • 将一些比较复杂的表达式封装为计算属性

    var vm = new Vue({
    	data: {
          msg: '哈哈'
    	},
    	computed: {
          msgAddNum: function() {
    		return this.msg + 111;	
    	  }
    	}
    })
    

  • 注意：

    • 一定要有返回值
    • 会将结果进入缓存
    • 当计算属性依赖的数据发生改变时会重新执行计算属性对应的函数，并将结果再次进行缓存

• 过滤器

  • 将一些复杂的操作的封装为过滤器

    // 过滤器的定义
    Vue.filter('myfilter', function(data) {
    	returnt data.format('YYYY-MM-DD')
    })
    // 过滤器的使用
    <div id="app">
    	{{ msg | myfilter }}
    </div>
    

• 侦听器

  • 侦听数据的改变，当数据改变时， 会触发一个函数

    var vm = new Vue({
       el: "#app",
       data: {
    		msg: '这是展示的数据'
    	},
    	watch: {
          msg: function(newValue, olaValue) {
            // 逻辑处理
          }
    	}
    })
    

• 组件

  • 基本概念

    • vue 中有一种开发思想：组件化开发
    • 组件化开发：
      • 将所有的功能模板全部封装为组件
      • 组件的组成：
        • html
        • css
        • js
    • 模块化开发：
      • 将所有的逻辑代码进行封装
      • 模板的组成
        • js 代码

    // 组件的定义
    Vue.component('mycom', {
     	template: `<div>我是组件</div>`，
     	data() {
    		return {
              name: 'xjj'
    		}
    	},
    	methods: {
    	}
    })
    // 组件的使用
    <div id="app">
    	<mycom></mycom>
    </div>
    

• 路由

• 基本概念

  • 请求的路径对应的组件

• vue-router

  // 创建一个路由对象
  import home from './components/home'
  var router = new VueRouter({
  	routes: [
        { name: 'home', path: '/', component: home }
  	]
  })
  // 使用路由对象
  new Vue({
  	router
  })
  // 标签：
  <router-link></router-link>  // 跳转到路由的某一区域
  <router-view></router-view>  // 渲染路由
  

• vue-cli

  • 基本概念

    • vue 中的脚手架
    • 生成一个 vue 的项目结构

  • 使用：

    • 安装

      npm install -g @vue/cli
      

    • 使用

      vue create myproject
      

###运用Vue的一个技术栈

• vue.js
  • 使用框架
• vue router
  • 设置路由
• vue cli
  • 框架项目的结构
• vuex
  • 统一管理数据
• axios
  • 发送异步请求
• element-ui
  • 构建界面
• echart
  • 将数据以图表的形式进行显示
• Lodash
  • 数据的转换
• ...
  • 忠告：
    • 培养以下两种能力：
      • 查看文档
      • 解决 bug