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

一. 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.属性名用
总结：父传，子声明，就是子的了
小补充：常量传递直接用，变量传递加冒号

总结父传子

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

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

巴特西

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

一. vue基础

1. 历史介绍

前端框架与库的区别

vue起步

插值表达式

什么是指令

中常用的v-指令演示

v-bind使用

v-on的使用

阶段总结

v-model

v-bind 和 v-model的区别

v-for的使用

关于对象内存的this

漂亮的列表

渲染组件-父使用子组件

父子组件传值（父传子）

最新文章

热门文章