vue基础学习

歪歪鸭儿

于 2023-04-09 09:39:33 发布

阅读量68

点赞数

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/m0_58770795/article/details/130030491

版权

一vue基础

vue是一个流行的开源JavaScript框架，用于构建用户界面。它专注于视图层，采用了响应式的数据绑定和组件化得思想，使得开发者能更高效的架构交互式的web应用程序。文档入口:https://vuejs.org总结就是:

1.javascript框架

2.简化的dom操作

3.响应式数据驱动

首先做一个简单的vue程序你可以创建一个html文件，通过如下方式引入vue:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
  <div id="ap">{{message}}<div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:'#ap',
      data:{
        message:'hi',
      }
    })
  </script>
</body>

运行结果为：hi

<script>中

el是挂载点，用来是设置vue实例挂载的元素。

data是数据对象，格式是 data:{ }，数据对象中可以是字符串元素，数据元素也可以是数组，对象

  data:{
        message:'hi',
        school:{
          name:"liu",
          qq:123
        },
        campus:['北京','上海','广东','深圳']
      }
    })

二本地应用

1.内容绑定，事件绑定：

v-text,v-html,v-on

v-text:

<div id="ap" v-text='message'>vue</div>

var app=new Vue({

el:'#ap',

data:{

message:'hi'

}

}) //运行结果是hi,缺点是里面的内容会被取代

v-html:

<div id="ap">

<p v-html='message'></p>

</div>

var app=new Vue({

el:'#ap',

data:{

message:'<a href="#">按钮</a>'

}

}) //运行结果是按钮,可以解析出data数据对象中的html结构，将a标签解析出来，这是v-text所无法实现的。

v-on:在程序中，格式v-on:事件名="方法"，v-on:可以直接用@替代

<div id="ap">
    <input type="button" value="事件绑定" v-on:click="dolt">
    <input type="button" value="事件绑定" v-on:mouseenter="dolt">
    <input type="button" value="事件绑定" @click="dolt">
</div>
<script>
    var app=new Vue({
      el:'#ap',
      data:{
        message:'<a href="#">hi</a>',
        },
      methods:{
          doIt:function(){
            alert('vue');
        }
      }
    })

注意：methods不要写在data中，不然会报错不能识别click！

利用上面的v-text,v-html,v-on来编写计数器。

<body>
  <div id="ap">
    <button @click="subNum">-</button>
    <span>{{number}}</span>
    <button @click="addNum">+</button>
  <div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:'#ap',
      data:{
       number:1
        },
      methods:{
         addNum:function() {
          this.number=this.number+1;
         },
         subNum:function() {
          this.number=this.number-1;
         }
      }
    })
  </script>
</body>
</html>

2.显示切换，属性绑定

v-show,v-if,v-bind

v-show根据表达式的真假，切换元素的显示和隐藏。

<div id="ap">
    <input type="submit" value="改变显示状态" @click="changeShow">
    <image src="a.png" v-show="isShow"></image>
  <div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:'#ap',
      data:{
        isShow:false,
        age:17
        },
      methods:{
         changeShow:function(){
          this.isShow=!this.isShow
         }
      }
    })
  </script>

v-if和v-show类似，不同的是v-if的本质是操纵dom元素来切换显示状态。

v-bind指令

设置元素的属性（比如：src,title,class）

<head>
<style>
    .active{
      border:12px solid red
    }
  </style>
</head>
<body>
  <div id="ap">
    <image v-bind:src="imgSrc" alt=""></image>
    <image :src="imgSrc" alt="" :title="imgTitle+'!'"
    :class={active:isActive} @click="toggleActive"></image>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:'#ap',
      data:{
        imgSrc:"a.png",
        imgTitle:'vuejichu',
        isActive:false
        },
        methods:{
          toggleActive:function(){
            this.isActive=!this.isActive
          }
        }
    })
  </script>

案例图片切换：

<body>
  <div id="ap">
    <button @click="sub" v-show="index!=0">shangyizhang</button>
    <image v-bind:src="imgArr[index]" alt=""></image>
    <a @click="add" v-show="index!=imgArr.length-1">xiayizhang</a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:'#ap',
      data:{
        index:0,
        imgArr:[
               "1.jpg",
               "2.jpg",
               "3.jpg"
              ],
      
        },
        methods:{
          sub(){this.index--},
          add(){this.index++}
        
        }
    })

3.列表循环，表单元素绑定

v-for,v-on补充,v-model

v-for根据数据生成列表结构，经常和数组一块使用。

<div id="ap">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="删减数据" @click="sub">
   <ul>
    <li v-for="(it,index) in arr">{{index}}</li>//遍历数组
   </ul>
   <h2 v-for="it in veg">{{it.name}}</h2>//遍历数组中的对象
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:'#ap',
      data:{
        index:0,
        arr:['bei','shng','guang'],
        veg:[
          {name:"西红柿"},
          {name:"鸡蛋"}
        ]
      
        },
        methods:{
          add(){this.veg.push({name:"好吃"})},
          sub(){this.veg.shift()}
        }
    })
  </script>

v-on补充，传递自定义参数，自定义修饰符

详细见v-on详解

<div id="ap">
    <input type="button" value="点击" @click="dolt(2,5)">
    <input type="text"  @keyup.enter="sayHi">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:'#ap',
        methods:{
          dolt(p1,p2){
            console.log(p1);
            console.log(p2);},
          sayHi(){
            alert('hi')
          }
        }
    })
  </script>

v-model获取和设置表单元素的值(双向数据绑定)

 <div id="ap">
    <input type="text" v-model="message">
    <button @click="setM">修改message</button>
    <h2>{{message}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:'#ap',
      data:{
        message:'你好呀'
      },
        methods:{
          setM(){
            this.message='vue基础'
          }
        }
    })
  </script>

记事本案例：

实现功能：新增（1.生成列表结构v-for数组。2.获取用户输入v-model。3.回车，新增数据v-on.erter添加数据）

，删除，统计，清空，隐藏

三网络应用

vue结合网络数据开发应用，axios网络请求库和vue结合使用直接导入axios：

官网：axios

歪歪鸭儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue基础学习

2.获取用户输入v-model。data是数据对象，格式是 data:{ }，数据对象中可以是字符串元素，数据元素也可以是数组，对象。,可以解析出data数据对象中的html结构，将a标签解析出来，这是v-text所无法实现的。v-if和v-show类似，不同的是v-if的本质是操纵dom元素来切换显示状态。v-on:在程序中，格式v-on:事件名="方法"，v-on:可以直接用@替代。利用上面的v-text,v-html,v-on来编写计数器。--生产环境版本，优化了版本的尺寸和速度-->
复制链接

扫一扫