欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue 小白学习记录

程序员文章站 2022-05-28 18:37:10
...

前言

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

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

Vue 小白学习记录

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

Vue 小白学习记录

关于static,assets 文件夹

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

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

Vue 小白学习记录

总结:

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

assets中放自己的资源

关于compoents,views文件夹

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

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

总结：

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

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

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

关于生命周期函数

Vue 小白学习记录

我非常好奇的是，为什么要把outerHTML翻译成 外部的HTML，不应该是内部的嘛？然后我看了下中文的vue.js文档，看到里面的直接翻译，我惊了！！！
Vue 小白学习记录

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

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

Vue 小白学习记录

这就好像我刚入门编程的时候，接触到的英文教材上面的 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 依赖于 普通属性firstname，lastname，当它们两个中的任意一个发生改变时，``fullname的set`被触发

想观察值发生的变动并且及时作出反应时，使用 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: 把它用成它改有的样子，比如 实现特定的功能、产生特定的逻辑，newvalue与 oldvalue

比较，反应系统一词，我理解为，我们可以把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'
    	}
    }
    
}

上一篇： Spark Streaming编程快速入门

下一篇： python英文单词记忆游戏单词**机

推荐阅读