超详细 web前端开发：vue内部指令 _vue

本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性，适用人群囊括了除已有开发经验人员以外的小白新手，从how、why、what三个角度来让大家理解并使用该技术。

文章插图

前端框架与库的区别?jquery 库 -> DOM(操作DOM) + 请求
art-template 库 -> 模板引擎
框架 = 全方位功能齐全
简易的DOM体验 + 发请求 + 模板引擎 + 路由功能
KFC的世界里,库就是一个小套餐, 框架就是全家桶
代码上的不同
一般使用库的代码，是调用某个函数，我们自己把控库的代码
一般使用框架，其框架在帮我们运行我们编写好的代码
框架: 初始化自身的一些行为
执行你所编写的代码
施放一些资源
vue起步1:引包
2:启动 new Vue({el:目的地,template:模板内容});
options
目的地 el
内容 template
数据 data
vue的文件介绍目录介绍

文章插图

插值表达式{{ 表达式 }}
对象 (不要连续3个{{ {name:‘jack’} }})
字符串 {{ ‘xxx’ }}
判断后的布尔值 {{ true }}
三元表达式 {{ true?‘是正确’:‘错误’ }}
可以用于页面中简单粗暴的调试
注意: 必须在data这个函数中返回的对象中声明
什么是指令在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
类似于html页面中的属性 ```
比如在angular中以ng-xxx开头的就叫做指令
在vue中以v-xxx开头的就叫做指令
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定
vue中常用的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=https://www.isolves.com/it/cxkf/bk/2019-12-25/"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