Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

vue注意点及报错整理

import Vue from 'vue'
// component类似于 export default 的一个对象
const component = {
  name: 'comp',
  render (createElement) {
    return createElement('div', {
      style: this.style
    }, this.$slots.default)
  },
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      },
      value: 'component value'
    }
  }
}

// 再实例化一个组件
new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  data () {
    return {
      value: '123'
    }
  },
  mounted () {
    console.log(this.$refs.comp, this.$refs.span, this.$refs.comp.value)
  },
  template: `
    <div>
      <comp-one ref="comp">
        <span ref="span">{{value}}</span>
      </comp-one>
    </div>
  `,
  render (createElement) {
    return createElement(
      'comp-one',
      {
        ref: 'comp'
      },
      [
        createElement('span', {
          ref: 'span'
        }, this.value)
      ])
  }
})

v-bind绑定的attribute属性避免使用大写,因为浏览器会将attribute转化为小写

computed: 基于缓存在依赖的数据(响应式)未变化时,不会重复调用,这是相较于调用method属性中的函数的优势。计算依赖属性是临时计算出(v-for)则只能使用method

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
:class只能存在一个,可以和class共存
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> 兼容不同浏览器写样式

<template> 标签:在html自定义一个标签也会被当作一个行内标签渲染,所以template只不过是 Vue 里面的一个包裹标签
template上 v-show不会起作用,v-if可以

添加key能够表示元素是独立的,即使是同一位置切换的状态。 同时为每一个节点提供唯一的key,便于更新维护

v-for:value , [key,] index in/of 数组/对象

响应式缺陷:数组(splice、set())、对象(set)
数据更新渲染是异步的:

vm.message = 'new message' // 更改数据

在main.js中引入 .vue文件 需要在vue中 export default{}   
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {   // promise回调   
  vm.$el.textContent === 'new message' // true
})

<ul>、<ol>、<table> 和 <select>内部只能出现指定特殊元素,如果想让自定义vue组件放进去:<table><your-vue></your-vue></table> table会被删掉,your-vue组件会提到外层,<table> <tr is="your-vue"></tr></table>

事件:给method传参原生事件@click="click($event)"
事件修饰符:......

在表单中,v-model/v-bind(动态)绑定的是标签值得变量,value是变量对应的值,id是唯一标识符,一个标签只有唯一的3者。当选中的时候会将对应的value赋值到对应v-model/v-bind的变量上
表单修饰符:.lazy .number .trim

组件全局注册Vue.component、new Vue() 局部注册:var component = {} \ .vue文件

this.\(emit(),父组件中可以通过\)event访问到第二个后续的参数

html里面 attribute是不区分大小写的,其属性得改为‘短横线分隔命名法’

\(attrs代表爷爷传递的值而父组件中未使用剩下来的属性。\)listener代表父组件上所有绑定的事件(用于在子组件中合适的位置触发)

插槽里面的作用域问题:父组件无法访问子组件中的数据
作用域插槽解决了上述问题,在子组件中 v-bind绑定响应数据即可
v-slot只能放在template或自定义组件上, slot跟作用域、slot-scope跟子组件变量(slot跟slot-scoped成对出现)

this.\(options获取当前组件(Vue对象)上的所有属性(name、data、prop),打印`this.\)options`在proto原型链上可以看到

inline-template写自定义组件名字的时候出现在自定义包括范围内的都是其template
x-template 将自定义组件的模板单独定义在script标签中

render渲染函数:第一个参数默认是createElement

new Vue({
  render: h => h(App),
}).$mount('#app')

vue项目中的所有文件vue文件都会经过render编译成虚拟节点的编译文件,再挂载上去
JSX模拟react写法,对render的简写

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成:

VUE报错You are using the runtime-only build of Vue where the template compiler is not available
template放在字符串中需要经过编译成render函数才可进行下一步   
// 解决:在vue.config.js配置  alias: {   'vue$': 'vue/dist/vue.esm.js' }
posted @ 2020-11-05 12:44  365/24/60  阅读(164)  评论(0编辑  收藏  举报