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  用于子组件插槽用的
posted @ 2022-06-24 20:18  请善待容嬷嬷  阅读(39)  评论(0编辑  收藏  举报