Vue-element-template项目学习笔记

1.

vue 在css 引入背景图片报错:Module not found: Error: Can't resolve '../../images/icons/loading2.gif' in '/home。报错信息就是找不到路径,我是这样的写法:background-image: url(../../images/icons/loading2.gif);
这是使用相对路径,报错了。后面改成background-image: url(/assets/images/icons/loading2.gif);不报错了,但是图片还是没有显示。
百度找答案~,终于background-image: url(‘~@/assets/images/icons/loading2.gif’); ~@的意思:@是webpack设置的路径名,代表的是src目录,可以在build / webpack.base.conf.js更改设置。

2.

app.vue文件我们可以分成三部分解读,
(1) 标签包裹的内容:这是模板的HTML Dom结构,里边引入了一张图片和 标签,标签说明使用了路由机制。我们会在以后专门拿出一篇文章讲Vue-router。
(2) 标签包括的js内容:你可以在这里些一些页面的动态效果和Vue的逻辑代码。
(3) 标签包裹的css内容:这里就是你平时写的CSS样式,对页面样子进行装饰用的,需要特别说明的是你可以用来声明这些css样式只在本模板中起作用.

3.

原生事件:就是js事件,比如click事件、鼠标事件等。给自定义组件绑定原生事件,是给组件根元素绑定原生事件。比如你定义了一个组件a:

methods:{
  click(id){
      this.$emit('click',id);
  }
}

当你用这个组件a时,@click绑定自定义事件,带有id参数;@click.native绑定原生click事件,没有id参数。可以这样理解。即当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素,就不需要。

4.

(1)mapGetters:vuex的语法,用于将vuex的getters映射到某个组件的计算属性里。
(2)…:es6 的扩展运算符,它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形。
(3)Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
Vuex有五大核心概念:

  • State 可以理解为数据对象,里面包装了各种数据,类比为一个单例模式的对象,里面封装了很多数据
  • Getter 可以理解为get函数,从state里获取数据,在这里还可以对原始数据进行一些转换包装后返回。
  • Mutation 可以理解为update,对state里的数据进行修改。
  • Action 可以理解为异步操作调度,就是有一个对state操作(mutation)的队列,action相当于把这些操作(mutation)放入该队列,这样可以尽可能的不影响当前操作。
  • Module 命名空间,一个数据对象有时候太复杂,例如订单数据与员工数据没有关系,强行放一起有些乱,可以分多个模块按其功能对数据进行划分设计多个State,这样也方便认知与解耦。

5.

router(路由)的作用:实现不同组件间的切换。vue-router提供的两个元素:
(1)router-link:默认渲染为一个a标签(a链接);
(2)router-view:用来当作占位符,将来路由规则匹配到的组件会展示到这个router-view中去。

6.Vue项目文档结构

7.常用标签

  • (1):
  • 定义列表项目,可用在有序列表(
      )、无序列表(
        )和菜单列表()中。
      • (2):
          定义了一个有序列表. 列表排序以数字来显示。使用
        1. 标签来定义列表选项。
        2. (3):
            定义无序列表。将
              标签与
            • 标签一起使用,创建无序列表。
              示例1
            
            
             
             
            菜鸟教程(runoob.com) 
            
            
            
            

            有序列表:

            1. Coffee
            2. Tea
            3. Milk

            无序列表:

            • Coffee
            • Tea
            • Milk

            运行结果:


            示例2

            
            
             
             
            菜鸟教程(runoob.com) 
            
            
            
            
            1. Coffee
            2. Tea
            3. Milk
            1. Coffee
            2. Tea
            3. Milk

            运行结果:

            8.Vue实例生命周期钩子函数created和mounted简介

            http://www.php.cn/js-tutorial-391845.html

      你可能感兴趣的:(Vue-element-template项目学习笔记)