vue.js及项目实战[笔记]— 01 vue.js

时间：2024-01-03 22:37:50

一. vue基础

1. 历史介绍

  • angular 09年，年份较早，一开始大家是拒绝的
  • react 2013年，用户体验较好，直接拉到一堆粉丝
  • vue 2014年，用户体验较好

前端框架与库的区别

  • jquery库->DOM（操作DOM）+请求
  • art-template 库->模板引擎
  • 框架 = 全方位功能齐全
    • 简易的DOM体验+发请求+模板引擎+路由功能
  • KFC的世界里，库就是一个小套餐，框架就是全家桶
  • 代码上的不同
    • 一般使用库的代码，是调用某个函数，我们自己把控库的代码
    • 一般使用框架，其框架在帮我们运行我们编写好的代码
      • 框架：初始化自身的一些行为
        • 执行你所编写的代码
        • 施放一些资源

vue起步

  • 1.引包
  • 2.启动new Vue({el:目的地,template:模板内容})
  • options
    • 目的地 el
    • 内容 template
    • 数据 data

插值表达式

  • {{表达式}}
    • 对象（不要连续3个{{name:'jack'}}）
    • 字符串{{'xxx'}}
    • 判断后的布尔值{{true}}
    • 三元表达式{{true?'正确':'错误'}}
  • 可以用于页面中简单粗暴的调试
  • 注意：必须在data这个函数中返回的对象中声明

什么是指令

  • 在vue中提供了一些对于页面+数据的更为方便的输出，这些操作就叫做指令，以v-xxx表示
    • 类似于html页面中的属性<div v-xxx></div>
  • 比如在angular 中以 ng-xxx开头的就叫做指令
  • 在vue中 以v-xxx开头的叫做指令
  • 指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关DOM操作的绑架

中常用的v-指令演示

  • v-text 元素的InnerText属性，必须是双标签
  • v-html 元素的innerHTML
  • v-if 判断是否插入这个元素
  • v-else-if
  • v-else
  • v-show 隐藏元素，如果确定要隐藏，会给元素的style加上display:none
v-text 只能用在双标签中

v-text 其实就是给元素中的innerText赋值

v-html 其实就是给元素的innerHTML赋值

v-if 如果值为false，会留下一个<!----->作为标记，玩万一未来v-if的值是true了，就在这里插入元素

如果有if和else就不需要单独留坑了

如果全用上 v-if 相邻v-else-if 相邻 v-else 否则 v-else-if 可以不用

v-if 和 v-else-if 都有等于相应的值，而v-else直接写

v-if家族都是对元素进行插入和移除的操作

v-show是显示与否的问题

注意：指令其实就是利用属性作为标识符，简化DOM操作，

看：v-model="xxx"

v-model 代表要做什么  xxx代表针对的js内存对象

写在那个元素上，就对那个元素操作

v-bind使用

  • 给元素的属性赋值
    • 可以给已经存在的属性赋值input value
    • 也可以给自定义属性赋值 mydata
  • 语法 在元素上 v-bind：属性名='常量||变量名'
  • 简写形式：属性名="变量名"
  • <div v-bind:原属性名="变量"></div>
    <div :属性名="变量"></div>

v-on的使用

  • 处理自定原生事件的，给按钮添加click并让使用变量的样式改变
  • 在元素上v-on：原生事件名= "给变量进行操作"
  • 简写形式：@原生事件名 = "给变量进行操作"

阶段总结

  • 如何启动vue
    • 1.引包
    • 2.留坑
    • 3.启动（new Vue）
    • options：el/template/data函数
  • 更便捷的操作DOM及数据 v-xxx指令
    • v-text/v-html/v-if/v-show/v-bind/v-on
    • v-bind绑定属性值
    • v-on绑定事件

v-model

  • 双向数据流（绑定）
    • 页面改变影响内存（js）
    • 内存（js）改变影响页面

v-bind 和 v-model的区别

  • input v-model="name"
    • 双向数据绑定 页面对于input的value改变，能影响内存中name变量
    • 内存js改变name的值，会影响页面重新渲染最新值
  • input : value="name"
    • 单向数据绑定 内存改变影响页面改变
  • v-model：其的改变影响其他 v-bind：其的改变不影响其他
  • v-bind 就是对属性的简单赋值，内存中值改变，还是会触发重新渲染

v-for的使用

  • 基本语法 v-for="item in arr"
  • 对象的操作v-for="item in obj"
  • 如果是数组没有id
    • v-for="(item,index) in arr" : class="index"
  • 各种v-for的属性顺序（了解）
    • 数组 item,index
    • 对象 value，key，index

关于对象内存的this

  • vue已经把以前this是window或者事件对象的问题搞定了
  • methods和data本身是在同一个对象中的，所以在该对象中可以通过this随便取
  • this.xxx取data中的值，this.xxx Method调methods中的函数

漂亮的列表

  • class是可变的

渲染组件-父使用子组件

  • 1.创建子组件（对象）
var Header = {

    template:'模板',

    data(){

        // 是一个函数

    },

    methods:{

        // 功能

    },

    components:{

        // 子组件们

    }

}
  • 2.在父组件中声明，根属性components:{组件名:组件对象}
  • 3.在父组件要用的地方使用<组件名></组件名>
    • 在不同的框架中，有的不支持大写字母，用的时候
      • 组件名 MyHeader
      • 使用my-header
  • 总结：有父，生子，声明，使用

父子组件传值（父传子）

  • 1.父用子的时候通过属性传递
  • 2.子要声明props:['属性名']来接收
  • 3.收到就是自己的了，随便你用
    • 在template中 直接用
    • 在js中 this.属性名 用
  • 总结：父传，子声明，就是子的了
  • 小补充：常量传递直接用，变量传递加冒号
总结父传子

* 父用子 先有子，声明子，使用子

* 父传子 父传子（属性），子声明（收），子直接用（就是自己的一样）

相关文章