Vue学习总结

最新推荐文章于 2024-05-27 09:56:21 发布

原创最新推荐文章于 2024-05-27 09:56:21 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #webstorm

前端专栏收录该内容

6 篇文章

订阅专栏

webstorm创建vue项目后立即运行可能会报一些框架未安装的错误，可以先等一下，估计是后台安装。
v-for错误

报错代码
<li v-for="todo in todos" >
        {{ todo.text }}
      </li>

报错提示
      ✘  https://google.com/#q=vue%2Frequire-v-for-key  Elements in iteration expect to have 'v-bind:key' directives  
      src/components/AboutUs.vue:8:7

正确代码
<li v-for="todo in todos" :key="todo.text">
{{ todo.text }}
</li>

eslint格式报错

错误信息
 ✘  http://eslint.org/docs/rules/indent  Expected indentation of 0 spaces but found 2  
  src/components/AboutUs.vue:17:1
    export default {
   ^


✘ 1 problem (1 error, 0 warnings)

解决方法
在改文件上右键选择"Fix ESLint Problems"

指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性
v-bind //绑定元素特性,将data中的数据与标签中的属性绑定,例如<span v-bind:title="message">将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。 v-bind:href="url"缩写:href=“url”
v-for//循环显示
v-if v-else//判断是否显示
v-model=“message”//绑定数据，一般为input，当input中数据发生改变会同时改变message的值
v-on //指令添加一个事件监听器，如<button v-on:click="reverseMessage">逆转消息，v-on:click="doSomething"缩写@click="doSomething

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show
较好；如果在运行时条件很少改变，则使用 v-if 较好。

侦听器使用

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }

反向传值

//反向传值
<button v-on:click="$emit('enlarge-text')">
 Enlarge text
</button>
//接收数据
<blog-post
 ...
 v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

//传值
<button v-on:click="$emit('enlarge-text', 0.1)">
 Enlarge text
</button>
------
<blog-post
 ...
 v-on:enlarge-text="postFontSize += $event"

></blog-post>
//调用方法
<blog-post
 ...
 v-on:enlarge-text="onEnlargeText"
></blog-post>

展示标签innerHtml的内容
动态组件

<template>
    <button @click="handleChangeView('ComponentA')">ComponentA</button>
    <button @click="handleChangeView('ComponentB')">ComponentB</button>
   <component :is="currentView"></component>
</template>
<script>
  import ComponentA from './ComponentA'
  import ComponentB from './ComponentB'
  data: function () {
 	 return {
    		currentView: 'ComponentA'
	  }
   },
   components: {ComponentA,ComponentB},
   methods: {
 	 handleChangeView: function (component) {
   		 this.currentView = component
 	 }
</script>

常用props验证

props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }