Vue 小白学习记录

前言

Vue 这个东西很强,听说不会js的学完后也能用得飞起?就是有点无脑,本文主要意图是记录自己学习中的流程和各种疑点,总之它提供给我们有一堆相似的操作,但是要把它用成这个语言该有的样子,精确到哪个文件夹该放什么文件,形成一种开发的风格、规约,这样最好不过

Vue cli 2.x版本构建项目目录一览

QQ截图20190805111405.png


Vue cli 4.x版本构建项目目录一览

yulan】4.png


关于static,assets 文件夹

**相同点:**资源在html中使用,都是可以的。
**不同点:**使用assets下面的资源,在js中使用的话,路径要经过webpack中loader编译,路径不能直接写。static里面的文件build后只是复制一遍,路径要写绝对路径

**注意:**在动态的绑定上面,使用assets中的资源会加载失败,因为webpack使用的是commenJS规范,必须使用require才可以(在运行时动态的决定请求哪一个资源进来)

assets.png

总结:

static中放别人的库(建议放一些外部第三方)

assets中放自己的资源

关于compoents,views文件夹

在之前的 vue cli2.x 中我还没有发现有个 views 的文件夹,现在多了一个,所以就百度了下:

然后又扯到了一个 containers文件夹

总结:

components中是推荐放常用的一些小组件,这些组件将来可能被复用到很多个地方,

views中推荐放页面级的组件,按照它的命名,可以想到是各个视图,一般views组件不被复用

containers属于容器级组件,根据项目大小决定是否使用


关于生命周期函数

VUElifecycle.jpg

我非常好奇的是,为什么要把outerHTML翻译成 外部的HTML,不应该是内部的嘛?然后我看了下中文的vue.js文档,看到里面的直接翻译,我惊了!!!
vue的.png

这难到不是对新手理解及其不友好?前辈的直接翻译,是真的 n p

然后我又查了 MDN,还在一些框架中看到outerHTML 的字样,它们的功能都是如此:
outerHTML属性用来设置或者返回元素本身以及其后代HTML内容

004644zbxxh3r6clr4u140.png

这就好像我刚入门编程的时候,接触到的英文教材上面的 context,直接被翻译成了上下文,那不分明就是执行调用时,入栈的时候有个执行体么?用来保持里面的结构,数据等等…

Vue 组件的三大组成部分

template 模板:

<template>
<div id="app"> <!--根标签-->
    {{mseeage}} <!--插值语句-->
</div>
</template>

每个模板要求有一个 container容器 (必须要有一个根标签,span,p等等内联元素都行)

script 脚本:

<script>
export default {
    name:'app',
    data(){
        return{
            arr:[]
        }
    },
    components:{
        ...
    }
        ...
}
</script>

在模块化编程中 data 需要是一个函数且返回一个对象,而不是单纯的 key,value

components 中的 组件名称命名请参考 Vue 官方风格指南

style 样式表:

<style>
	...
</style>

v-bind 动态绑定标签属性

<div id="app" v-bind:title="titleName">
{{msg}}
</div>

<!--简写为:-->

<div id="app" :title="titleName">
{{msg}}
</div>

v-on:click 事件触发

<div id="app" v-on:click="test">
{{msg}}
</div>

<!--省略为 @click-->

<div id="app" @click="test">
{{msg}}
</div>

v-model 观察者模式实现的双向绑定

<template>
    <input type="text" v-model="name" />
</template>
<script>
	export default {
        data(){
            return{
                name:''
            }
        }
    }
</script>

在input 中输入内容,vue组件实例中的属性马上响应发送改变,牵一发而动全身

computed 计算属性(它是属性)

<div id="app-name">
	<input type="text" name="" v-model="firstname">
	<input type="text" name="" v-model="lastname">
	<input type="text" name="" v-model="fullname">
</div>

const vm = new Vue({
		el:'#app-name',
		data:{
            //普通属性
			firstname:'Will',
			lastname:'Smith',
			
		},
		computed:{
            // 计算属性
			fullname:{
               
				get(){
					return this.firstname +' '+ this.lastname;
				},
				set(value){
					const names = value.split(' ');
					this.firstname = names[0];
					this.lastname = names[1];
				}
			}
		}
	});

被初始化的时候调用一次 参考生命周期示意图

不定义 get(),set()fullname中的执行体(context)为 get时触发

计算属性内部与 data 中有相关联的值也会触发(当相关联的值发送改变的时候)

vue 知道 计算属性fullname 依赖于 普通属性firstnamelastname,当它们两个中的任意一个发生改变时,``fullnameset`被触发

想观察值发生的变动并且及时作出反应时,使用 computed,适合将普通属性中复杂一点的逻辑写在里面


watch 侦听器(他是一个监视者)

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(newval,oldval) {
        this.value = this.demo;
      }
    }
  };
</script>

watch 是一个属性,用来监视 (data)列表中的普通属性

一旦被检测的普通属性 的值发生变化,watch 可以捕获到修改


computed、watch、methods 比较

大佬文章 https://blog.csdn.net/zhouzy539/article/details/96340814

vue.js 官网给出 computed 与 methods 的答案是:computed 会缓存结果

普通函数中这样定义:

methods:{
    now:function(){
        return Date.now()
    }
}

我稍微将官网的例子修改了下,这样方便我理解,对比一下下面的 computed 中的计算属性 now:

每次手动调用都是新的 Date 值

在计算属性中这样定义:

computed: {
  now: function () {
    return Date.now()
  }
}

$vm.now 始终返回了初始化完成时候的值,既缓存了结果

假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。


w3plus上的总结:

  • methods:正如他的名字一样,它们是挂载在对象上的函数,通常是Vue实例本身或Vue组件
  • computed:属性最初看起来像一个方法,但事实却又不是方法。在Vue中,我们使用data来跟踪对特定属性的更改,得到一定的反应。计算属性允许我们定义一个与数据使用相同方式的属性,但也可以有一些基于其依赖关系的自定义逻辑。你可以考虑计算属性的另一个视图到你的数据。
  • watchers:这些可以让你了解反应系统(Reactivity System)。我们提供了一些钩子来观察Vue存储的任何属性。如果我们想在每次发生变化时添加一些功能,或者响应某个特定的变化,我们可以观察一个属性并应用一些逻辑。这意味着观察者的名字必须与我们所观察到的相符。

对于w3plus的总结我的理解:

  • methods :和computed写得一样的功能来用完全没毛病,自己手动调用
  • computed:可以在数据变化的时候自己调用,处理复杂的逻辑,上面的加粗关键词[自定义]
  • watchers: 把它用成它改有的样子,比如 实现特定的功能、产生特定的逻辑,newvalueoldvalue

比较,反应系统一词,我理解为,我们可以把watchers定义为 普通属性的**钩子函数**,在它数据发送改变后,我们做点什么


小小总结:

  1. **watch**擅长处理的场景:一个数据影响多个数据

  2. **computed**擅长处理的场景:一个数据受多个数据影响

  3. 相比于watch/computed,methods不处理数据逻辑关系,只提供可调用的函数


class 与 style 动态绑定

<div id="app-name" class="per" :class="a"></div>
<script>
    const vm = new Vue({
		el:'#app-name',
		data:{
			a:'aClass'
		}
	});
</script>

在浏览器中显示为:

<div id="app-name" class="per aClass"></div>

可取值为:String ,Object,Array

<div id="app-name">
    <p :class="a">class is string </p>     
    <p :class="{aClass:true , bClass:false}">class is string </p> 
    <p :class="['aClass','bClass']">class is array </p> 
</div>

字符串值会在组件实例的 普通属性和计算属性中查找

对象值为 key:value,value 标识为true时才起作用

数组值:按照排列顺序起作用,

注意:即使是

这样写

还是 显示为

的覆盖顺序。

另外

是不会报错的


:style=

用法一致,不过表现为这样:

data(){
    return{
        newStyle:{
        	color:'red',
            border:'1px solid blue'
    	}
    }
    
}
版权声明:本文为qq_36913208原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36913208/article/details/103544755