前端框架与库的区别?
jquery 库 => DOM(操作DOM) + 请求
有可能学习了了⼀一些art-template 库 -> 模板引擎
vue起步
new Vue({
el:'#app',//⽬目的地
data:{
//保存数据的地⽅方
},
template:`模板内容`
});
插值表达式
{{ 表达式 }}
对象 不要连续 3 个{{ name:'jack' }}
字符串串 {{ 'xxx' }}
判断后的布尔值 {{ true }}
三元表达式 {{ true?'是正确':'错误' }}
可以⽤用于⻚页⾯面中简单粗暴暴的调试
要⽤用插值表达式 必须要data中声明该属性
什什么是指令
在vue中提供了了⼀一些对于⻚页⾯面 + 数据的更更为⽅方便便的输出,
这些操作就叫做指令, 以v-xxx表示
⽐比如html⻚页⾯面中的属性 `<div v-xxx ></div>
⽐比如在angular中 以ng-xxx开头的就叫做指令
在vue中 以v-xxx开头的就叫做指令
指令中封装了了⼀一些DOM⾏行行为, 结合属性作为⼀一个暗号, 暗
号有对应的值,根据不不同的值，框架会进⾏行行相关DOM操作
的绑定
vue中常⽤用的v-指令演示
v-text:元素的textContent属性,必须是双标签 跟{{ }}效果
是⼀一样的 使⽤用较少
v-html: 元素的innerHTML
v-if : 判断是否插⼊入这个元素,相当于对元素的销毁和创建
v-else-if
v-else
v-show 隐藏元素 如果确定要隐藏, 会给元素的style加
上display:none。是基于css样式的切换
(7).v-if和v-show的区别 (官网解释)
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条 件块内的事件监听器器和子组件适当地被销毁和重建。
v-if 也是 惰性的 ：如果在初始渲染时条件为假，则什么也 不不做——直到条件第⼀一次变为真时，才会开始渲染条件块。
相⽐比之下，v-show 就简单得多——不管初始条件是什么， 元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更更⾼高的切换开销，⽽而 v-show 有更高的 初始渲染开销。因此，如果需要⾮非常频繁地切换，则使⽤用 v-show 较好；如果在运⾏行行时条件很少改变，则使用 v-if 较好。
v-bind使⽤用
给元素的属性赋值
可以给已经存在的属性赋值 input value
也可以给⾃自定义属性赋值 mydata
语法 在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"
v-on的使⽤用
处理理⾃自定义原⽣生事件的,给按钮添加click并让使⽤用变量量的
样式改变
普通使⽤用 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: 其的改变不不影响其
他
<div v-bind:原属性名="变量量"></div>
<div :属性名="变量量">
</div>
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的优先级最⾼高
