vue大纲

本文详细介绍了Vue.js的核心特性和使用技巧,包括Vue的特点、单页应用优缺点、指令(v-model、v-bind、v-if等)、计算属性与实例方法、事件修饰符、组件通信(props、事件、ref、插槽)、生命周期、动态组件、过渡动画、路由(传参、懒加载、编程式导航)和axios请求。同时,探讨了Vuex的状态管理,包括State、Mutation、Action、Getter和Module。
摘要由CSDN通过智能技术生成

##  Vue的了解:


是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。(核心是数据)

 
vue 特点


Ø 数据驱动,数据(模型层)、视图层和模型层分离 m v c(model view controller)
Ø 双向数据绑定:MVVM (viewmodel) model view (viewmodel)
Ø SPA(Single Page Application)单页面应用 (所有页面都是同一路径,唯一变化就是锚点,不利于seo)
Ø 组件化、模块化 - (代码封装 复用 有利于后期代码维护) export import
Ø 国人开发 文档通俗 学习成本低
前端渲染 (拿到数据自己组装) vs 后台渲染(直接返回需要的数据) 降低服务器负担、带宽压力小 SEO、兼容性好、安全性高(后台数据不可见) 用户体验好

 
SPA 单页应用的优缺点


一次性请求所有的 html js css资源 跳转时候不再请求资源
优点
1 页面之间切换 跳转迅速
2 资源只请求一次 减少对于服务器的压力 (10w)
缺点
1 第一次加载慢 (懒加载,压缩,elemetui )
2 url不会发生变化 不太利于seo搜索引擎的收录 seo 为了百度,谷歌,收录排名。


directives


自定义属性 带有v-前缀,用于给HTML元素添加特殊的行为,Directives可以动态地绑定数据到HTML元素,控制DOM元素的显示和隐藏,监听事件等。Vue提供了一些内置指令,比如v-if、v-show、v-for、v-bind、v-on等,我们也可以自定义指令来实现特定的功能。
vue语法
所有指令后面跟的都是变量

<script>
new Vue({
        el: "该盒子的id名",
        data() {
          return {
            btn: 1,
          };
        },
      });
</script>



v-model:双向绑定 例:


在Vue中,当我们需要双向绑定表单元素的值到组件的数据属性时,通常需要使用v-model指令。具体来说,如果我们需要实现以下功能之一,就需要使用v-model:
1将表单输入元素(如input、textarea、select等)的值与组件内部的数据属性进行双向绑定。
2处理复选框和单选框的值,并将值与组件内部的数据属性进行双向绑定。
3例如,如果我们需要在一个表单中输入用户的姓名和年龄,并将这些数据保存到组件的data对象中,可以通过v-model指令来实现:
v-model=“ ”

<div id="app">
            <img v-bind:src="imgarr" alt=""><br>
            <input type="text" v-model="num">+
        <input type="text" v-model="num1">={
  {parseInt(num)+parseInt(num1)}}
        <div v-html="app2">
    </div>
  js代码
   <script>
    new Vue({
            el: '#app',
            data: {
                num:1,
                num1:2,
                imgarr:"田1.jpg",
                app2:'<h1>qwertyuio</h1>',
            }
        })
      </script>



v-bind:


可以用于任何属性,有两个属性有另外的写法class、style
绑定标签中的所有属性
class 把这个类名变为动态 静态时 也不需要
动态情况下:其中一方改变 另一方也改变
将数据项绑定到属性上,例:img的src属性、a标签的href属性
,样式相关的属性绑定 class 属性,(v-bind:可以省略用 :代替)
:class属性值(v-bind) 表达式 对象 都可
当我们需要实现以下功能之一时,就需要使用v-bind指令:
1将组件的属性与父组件的数据属性进行双向绑定。
2在组件内部通过计算属性或方法实时更新属性的值,并将其反映到模板中。

css代码
<style>
 .sss2{
           color: #fff;
           font-size: 20px;
           font-weight: bold;
           width: 20px;
           height: 50px;
           background-color: rgb(201, 0, 0);
       }
       .sss4{
        color: rgb(255, 4, 4);
        font-size: 20px;
       }
  </style>
(部分代码)
<ul id="uuu">
        <li><span v-bind:class="sss1">{
  {sss2}}</span><br><br><br><span v-bind:class="sss5">{
  {sss6}}</span><br><br> <br><span v-bind:class="sss3">{
  {sss4}}</span><img v-bind:src="imgarr1" class="tu" alt=""><br></li>
        <li><span v-bind:class="sss11">{
  {sss12}}</span>灵境行者 <span v-bind:class="sss13">{
  {sss14}}</span></li>
        <li><span v-bind:class="sss21">{
  {sss22}}</span>宿命之环 <span v-bind:class="sss13">{
  {sss14}}</span></li>
        <li><span v-bind:class="sss31">{
  {sss32}}</span>道诡异仙 <span v-bind:class="sss13">{
  {sss14}}</span></li>
        <li><span v-bind:class="sss41">{
  {sss42}}</span>诡秘之主 <span v-bind:class="sss13">{
  {sss14}}</span></li>
    </ul>
    js代码
<script>
 new Vue({
            el: '#uuu',
            data: {
                sss2:'NO.1',
                sss1:'sss2',
                sss4:'销量冠军',
                sss3:'sss4',
                sss6:"深空彼岸",
                sss5:'sss6',
                sss12:'2',
                sss11:'sss12',
                sss14:'--',
                sss13:'sss14',
                sss22:'3',
                sss21:'sss22',
                sss32:'4',
                sss31:'sss32',
                sss42:'5',
                sss41:'sss42',
                imgarr1:"1.png",
            }
        })
       </script>



v-bind和v-model


区别:
v-bind指令用于将组件的属性与表达式进行绑定,实现动态更新。通常情况下,我们使用v-bind来绑定HTML元素的属性值,比如class、style、src等。例如,我们可以使用v-bind:class来动态地控制元素的样式
v-model指令用于在表单元素(如input、textarea、select等)与组件内部的数据属性之间创建双向数据绑定。当我们需要处理表单输入或选择等交互行为时,通常需要使用v-model指令。例如,在下面的代码中,我们使用v-model指令实现了表单输入的双向数据绑定。
总之,v-bind和v-model都是用来绑定数据到HTML元素上的指令,但它们的作用略有不同。v-bind用于动态地绑定HTML元素的属性值,而v-model用于在表单元素与组件内部的数据属性之间创建双向数据绑定。
v-if,V-show:隐藏盒子
v-if (显示隐藏是将dom元素整个添加或删除) v-else-if v-else,v-show
V-show 显示隐藏(css--display:none)

例:
 

<!-- 该盒子需要隐藏 -->
<div v-show="showB
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值