vue基础
vue是一款用于构建用户界面的 JavaScript 框架,并提供了一套声明式的、组件化的编程模型
vue是渐进式的js框架 所谓渐进式就是自底向上逐层应用 因为vue本身没什么东西,都是慢慢通过插件什么的依次应用 框架的顺序是先有Angular 其次是Rcact 最后才是vue 相当于vue对上面两种进行了下总结 用来开发单页面的应用 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
vue必须安装之后才能使用 安装的两种方式
1.通过bootcdn.cn网站里面查找最新的vue版本 复制下载下来 (vue.global.js)
2.通过终端命令执行npm i vue@next 来进行安装
vue的数据:
vue2的根组件的data是一个对象
vue3的根组件的data是一个函数 // 根组件就是挂载体 比如下面的<div id="app"></div>
模块化开发方式案例 切记 要在服务器端开启 否则网页打开之后插值识别不出来
1 <div id="app"> 2 {{msg}} 3 </div>
1 <!-- 模块化的开发方式 --> 2 <!-- type="module"添加 该属性使用模块化方式 --> 3 <script type="module"> 4 import {createApp} from './js/vue.esm-browser.js' 5 console.log(createApp); 6 7 createApp({ 8 data(){ 9 return { 10 msg:'hello vue3' 11 } 12 } 13 }).mount('#app') 14 </script>
关于vue的指令 :固定格式v-作为开头 写在标签里面
v-for 列表渲染的 一定要结合 :key 一起使用 可以遍历数组和对象的(遍历的参数代表的意义并不一样)vue2方法 v-for="item in 对象名" vue3方法 v-for=“item for 对象名” vue的条件渲染是惰性的(如果一开始条件为false 则什么也不做) eg:v-if 但是v-show不是惰性的
v-if 是“真正”的条件渲染,因为它会确保在切换过程中,条件块内的事件监听器和子组件适当地被销毁和重建。也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件 块。
v-else-if
v-else
v-show 与v-if比着 v-show就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁 地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
v-bind 属性绑定 常见绑定属性和类名 <h1 :class="['col', {border:show}, size]" >以数组的形式绑定类名</h1> v-bind:简写为:
v-on 事件绑定 eg:这种是简写的形式 <p @click="print()">简写</p> // print()对应的是methods:里面的名字 这种不是简写形式eg:<h1 v-on:click="print('100')">事件</h1> ; <h1 v-on:click.stop="print('100')">事件(.stop是用来阻止事件冒泡的 .prevent阻止默认行为的 .capture是事件捕获的 .once绑定一次性事件的) </h1>
v-text : 插入纯文本数据(不能识别data里面的标签)
v-html : 解析 html 结构(可以识别data数据里面的标签)
v-model (本质是语法糖)表单输入绑定 真正绑定的是表单元素的value属性 checkboxdata数据里面对应的:【】 普通的是:'' ; (绑定单选按钮 绑定到一个布尔类型, 如果要获取用户选中的内容,需要结合 value属性 一起使用;设置默认的选中项, v-model绑定的值设置value对应的值)
v-pre 只显示{{}}插值
v-cloak 避免闪烁 用来解决v-once的
v-once 一次性跳过 只渲染一次 会取消响应式的状态
v-slot 用于子组件插槽用的