Vue

最新推荐文章于 2022-08-19 16:24:09 发布

逮逮逮虾户

最新推荐文章于 2022-08-19 16:24:09 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/qq_41200173/article/details/104967831

版权

简介

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

MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷
在这里插入图片描述

操作方法

谷歌浏览器下载LiveReload插件并开启
VSCode ctrl+shift+p 搜索LiveReload开启功能
运行后只需ctrl+s保存，浏览器就会自动刷新页面

引入

通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第一个程序

el：挂载点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue基础</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    {{ message }}
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>
</body>
</html>

除了Id选择器还能使用class，标签选择器等
el挂载点不能用在< body>和< html>标签上

data其他类型数据

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    {{ school }}
    <br>
    {{ school.name }}
    <br>
    {{ shuZu[0] }}
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      school:{
        name:"yycc",
        age:18
      },
      
      shuZu:["aaa","bbb","ccc"]
    }
  })
</script>
</body>

效果
在这里插入图片描述

v-text

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <h2 v-text="message">这句话会被覆盖</h2>
    <h2 v-text="message+'这句话会添加进去'">这句话会被覆盖</h2>
    <h2>{{message+'这句话会添加进去'}}这句话不会被覆盖</h2>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message:"手机卡胡椒粉"
    }
  })
</script>
</body>

效果

在这里插入图片描述

v-html

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <span v-text="message">这句话会被覆盖</span>
    <span v-html="message"></span>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message:"<h1>\(@^0^@)/</h1>"
    }
  })
</script>
</body>

效果

在这里插入图片描述

v-on事件绑定

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <input type="button" value="点我" v-on:click="doIt">  
     <!-- 效果一样的-->
    <input type="button" value="点我" @click="doIt">
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    methods:{
      doIt:function(){
        alert("迪丽热巴!!");
      }
    }
  })
</script>
</body>

this关键字

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <h3 @click="doIt">{{ff}}</h3>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data:{
        ff:"你好"
    },
    
    methods:{
      
      doIt:function(){
        this.ff+="草泥马"
      }
    }
  })
</script>
</body>

效果，点一次加一次草泥马，数据双向绑定

在这里插入图片描述

计数器

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <button @click="add">+</button>
    <span>{{ff}}</span>
    <button @click="sub">-</button>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data:{
        ff:0
    },

    methods:{
      
      add:function(){
        this.ff++
      },
      sub:function(){
        if(this.ff>0){
           this.ff--
        }
      },

    }
  })
</script>
</body>

效果

在这里插入图片描述

v-show

本质是控制元素的display属性
通过表达式控制图片的显示

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <img width="20px" height="20px" src="./img/59eedb5c71536.jpg" v-show="true">
    <img width="20px" height="20px" src="./img/59eedb5c71536.jpg" v-show="isShow">
    <img width="20px" height="20px" src="./img/59eedb5c71536.jpg" v-show="age>18">
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data:{
      isShow:false,
      age:16
    }
  })
</script>
</body>

结合方法使用

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <input type="button" @click="changeIsShow" value="点击我改变图片状态">
    <img width="30px" height="30px" src="./img/59eedb5c71536.jpg" v-show="isShow">
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data:{
      isShow:false,
    },
    methods:{
      changeIsShow:function(){
        this.isShow=!this.isShow
      }
    }
  })
</script>
</body>

v-if

效果和v-show差不多，只不过v-if 改变的document，为false时直接移除了元素，v-show是改变了display状态实现隐藏，在频繁使用的情况下使用v-show

v-bind

为元素绑定属性名

<p v-bind:text="theText"></p>
....
....
....
data:{
   theText:"显示这句话"
}

简写

<p :text="theText"></p>

三元表达式

<style>
   .active{
       ...
   }
</style>

<img src="..."  :class="isActive?'active':''" >
可以通过控制isActive来控制img样式是否生效

三元表达式其他写法

<img src="..."  :class="{active:isActive}" >

意思是active是否生效取决于isActive

v-for

<ul>
  <li v-for="item in theArray">
    aaaaa-{{item}}
  </li>
</ul>
....
....
....
data:{
  theArray:["qqq","www","eee"]
},

结果
在这里插入图片描述

<ul>
    <li v-for="(item,index) in theArray">
        {{index}}-aaaaa-{{item}}
    </li>
</ul>
....
....
....
data:{
  theArray:["qqq","www","eee"]
},

结果
在这里插入图片描述

遍历对象

<ul>
  <li v-for="(item,index) in thePeople" :title="item.catage">
    {{index}}-aaaaa-{{item.name}}
  </li>
</ul>

data:{
  thePeople:[
    {name:"番茄炒西红柿",catage:"11"},
    {name:"土豆拌马铃薯",catage:"22"},
  ]
},

这里的title属性是把鼠标放到元素上去才能显示出来的

用this修改数组元素

增加元素
this.thePeople.push({name:"青椒煎朝天椒",catage:"33"});
移除最前面的元素
this.thePeople.shift();

v-model

双向绑定

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <input type="text" v-model="message">
    <p>{{message}}</p>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data:{
      message:"爱神的客户"
    },
    
  })
</script>
</body>

效果
p便签里显示的内容会根据文本框里输入的内容变化

axios

在线引入库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios基于ajax
绑定class属性为asd的标签，通过get方式发送请求

document.querySelector(".asd").onclick=function(){
    axios.get("地址?key1=num1&key2=num2")
    .then(function(response){
        console.log("成功");
    },function(error){
        console.log(error);
    })
}

post用法区别

axios.post("地址",{key1:num1})

axios+vue

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <input type="button" @click="getJJ" value="点击改变P标签的值">
    <p>{{JJ}}</p>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data:{
      JJ:"爱睡觉啊"
    },
    methods:{
      getJJ:function(){
        console.log(this.JJ);//这里获取的是"爱睡觉啊"
        var that = this; //通过这种方法可以把返回来的值设置到data里面
        axios.get(".....").then
        (function(response){
          console.log(response.data);//获取返回的数据
          console.log(this.JJ);//打印出来是undefind,这里的this不同于外面的this
          that.JJ = response.data;
        },function (error){

        })
      }
    },
    
  })
</script>
</body>

逮逮逮虾户

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue

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

扫一扫