vue 学习笔记 (持续更新中)

官方标准构建模板

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')

• 首先是构造一个对象

  • 这里顺便解释一下为什么用data(),作为一个函数返回数据，而不是用以前的data:{}直接返回，这是因为vue组件化的核心思想，vue组件化，尤其是在父组件和子组件的数据传递中，element ui提现的淋漓尽致

  • 组件化有什么好？

    1. 可以复用，我们定义的组件可以被用在很多地方，而且很方便
    2. 隔离，这个是vue的优势，他们直接的数据传递是人为可控的，组件之间的命名空间是隔离的，他们的修改是毫无干扰的！

  • 回归到刚刚的问题，为什么用函数，因为函数重新拷贝了一份数据，假如一个组件被用了多次，我们要保证这些组件之间的数据不会互相冲突

脚手架

• vue里面的脚手架，就像我们spring boot应用的初始化工具
• vue需要一个像maven一样牛逼的包管理工具，以及打包工具

目录结构

• build 打包相关的代码

• config 配置

• node_modules npm安装的依赖模块

• src 我们开发需要关注的目录

  • assets 图片
  • components 组件
  • App.vue 入口文件
  • main.js 核心文件
  • index.css 样式

• static 静态文件(图片，地址，与代码无关的文件)

• public 公共资源

• index.html 首页的入口

• package.json 项目配置文件

基本知识补充

const vm=Vue.createApp(app).mount("#app")

他会返回一个vm，vm可以通过vm.message和vm.$data.message获取和修改属性，所以，我们在命名的时候变量名一定不能出现$，和java一样，$要留给框架

v-once : 一次性绑定数据，数据改变，页面不重新渲染

{{ }} ：渲染模板中是完全可以使用js表达式的，我们没有必要在script代码中进行转换，但是模板引擎只能支持单行表达式

属性和点击事件都是具有缩写的，还有就是，我们尽量不要直接操作dom元素，vue提供的完全更加方便

v-if是否出现该组件，v-show是否显示该组件，前者依靠dom，后者依靠css，所以，当我们元素的出现与消失会变化的时间，用v-show，当他在第一次渲染被决定的时候，用v-if，此外，v-if可以搭配v-else,v-else-if使用，他们绑定的判定元素要一致，总之在出现的情况中，他们只能有一个出现

v-for 可以遍历列表和对象，默认是他们的值，对象可以是key,value这样会出现键和值，vue也会帮助我们统计索引,在最后加一个index参数，用括号把它们括起来，它还可以直接迭代一个整数，从1开始，一直到你输入的整数。有个:key属性，它代表id，可以从我们遍历的对象取出来，做唯一标识，如果只是单纯的渲染，key其实无所谓，但是没有key，我们将会丢失元素的位置信息，直白点说，当我们的元素发生交换删除插入后，他们还会绑定原来位置的属性，而key就是帮助我们区别它们谁是谁的，这是vue-for自带的

说一下使用时发现的东西

• 我们的属性可以在vue的其他地方使用，而且是直接使用，不需要其他表达式，我们在用vue-for的时候，从对象中迭代出来的属性也可以直接使用，而且可以用在v-if中，注意一下，v-if在判断的时候用的是==而不是一个等号，只有sql是一个等号=，其他语言的一个等号一般都是赋值
• 有时候，我们定义的方法也会被传递到模板中，这可能会导致数据和函数冲突，所以，我们命名函数的时候，不要和数据冲突，我们命名的函数是行为，而数据是状态，不要冲突！
• js中的{}都是对象，我们要从对象的角度来理解vue的语法，你会发现这样好记忆的多

组件

app.component('runoob', {
    template: '<h1>自定义组件!</h1>'
})

runoob是组件的语意化标签，我们通过element-ui来理解组件是最好不过的例子

局部组件示例

<div id="app">
    <runoob-a></runoob-a>
    <!-- 和下面给组件起的名称对应 -->
</div>
<script>
 
var runoobA = {
  template: '<h1>自定义组件!</h1>'
    //组件要渲染的虚拟模板
}
 
const app = Vue.createApp({
  components: {
    'runoob-a': runoobA
  }//'runoob-a'是你给组件起的名字，上面标签名是一一对应的
})
 
app.mount('#app')
</script>

我们在写的时候，就要把他们想成一个个小的局部组件，这样很方便我们之后的复用

全局组件的模板语法，来自vue脚手架

export default {
  name: 'HelloWorld',//表示组件的名称
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

参数的传递

prop:[‘参数1’,‘参数2’]，传递方法看看element-ui就知道了

  <site-info
    v-for="site in sites"
    :id="site.id"
    :title="site.title"
  ></site-info>

传递过来之后，子组件就把这些数据当成data里的数据渲染即可

app.component('site-info', {
  props: ['id','title'],
  template: `<h4>{{ id }} - {{ title }}</h4>`
})

数据监听

watch: {
      question(newQuestion, oldQuestion) {//question是我们监听的属性
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
	}
}

这里我们也看到，我们是可以调用我们vueAPP内的方法的，就是this.方法名()

我们可以在模板引擎渲染函数值，渲染的结果就是函数的返回值，但是我们最好用vue提供的计算属性来渲染这些值，这样的效率更高

样式绑定

vue提供的样式绑定机制比我想象的要强大，我这里不做总结了

Vue 样式绑定

表单

v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值

在文本区域 textarea 插值是不起作用，需要使用 v-model 来代替：

<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

多选框

1. 绑定单个

   v-model的是一个布尔类型的变量

2. 绑定多个

   v-model绑定一个数组，随着多选框的选择不同，数组内显示的就是你现在选中的值

单选框

​ 只要绑定了同一个数据，这些数据就被视为单选框的值，最好在这里面初始化一个默认的

select 列表

​ select是可以多选的，这是今天才知道的

​ multiple 属性 然后按住ctrl才能多选

上述内容注意一点，value作为表单的核心属性，对上面三个仍然是必不可少的

表单绑定机制 摘自菜鸟教程

值绑定的作用和机制没看懂，这里没有花过多时间

修饰符

​ 有时候，我们的表单绑定的属性在其他地方也起到了渲染的作用，我们不想让它随着表单的变化而实时变动，可以用修饰符v-model.lazy（失去焦点后再同步）

​ 提交表单的时候，首尾的空格往往是没有任何作用的，我可以用v-model.trim减掉首尾的空格

​ 我在尝试的时候，发现这些修饰符是可以绑定多个的v-model.lazy.trim

指令与生命周期

自定义指令

感觉自己用不太到，跳过了，没有写总结

学习一下大佬的项目

下面是我学习到的经验

• 组件的引用，比如element-ui是在main.js中引入的

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

• 看不懂了，有时间再更新