前端开发框架—初识Vue

最新推荐文章于 2024-06-06 14:23:51 发布

阿支<－biubiu－⊂(`ω´∩)

最新推荐文章于 2024-06-06 14:23:51 发布

阅读量199

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_56593901/article/details/118971844

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端开发框架—Vue

一 Vue

1. 基本介绍

Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

2.官网

https://cn.vuejs.org/

3.创建工作空间

在这里插入图片描述

4.插件安装

二. Vue开发案例

开发环境版本，包含了有帮助的命令行警告

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

2.1初识vue

<script src="vue.min.js"></script>
 <div id="app01">
  {{message}}
 </div>
 <div id="app02">
    {{message}}
   </div>

 <script>
   new Vue({
       //绑定页面元素
       el:"#app01",
       //页面可以从data中获取数据信息
       data:{
           message:"helloworld01"
        }  
   })
 
    new Vue({
        el:"#app02",
        data:{
            message:"helloworld02"
        }
    })
 </script>

el: 绑定页面元素

2.2单击事件


<body>
    <script src="vue.min.js"></script>   
    <div id="app01">
        <!--v-on相当于是用来把静态资源变为动态资源的一个指令，可以用@来代替 -->
        <p><button @click="touchMe()">点我</button></p>
    </div>
    
    <script>
        new Vue({
            el:"#app01",
      //给页面使用方法
      methods: {
         //上面的click调用这个方法
        touchMe(){
             console.log("疼");    
          }
        }
       })
    
  </script>

methods：给页面绑定元素提供方法
console.log：把信息输出到浏览器的控制端
v-on相当于是用来把静态资源变为动态资源的一个指令，可以用@来代替
<button @click=“touchMe()”>点我

2.3 基本数据渲染和指令（单向绑定）

单向绑定：由内存加载到页面

<script src="vue.min.js"></script>
    <div id="app">
        <!-- v-bind把静态属性标签变为可被渲染的标签 用冒号来代替 -->
        <h1 :title="color">{{message}}</h1>
    </div>
      
    <script>
       new Vue({
           el:"#app",
          data:{
            message:"hello world",
               color:"蕾丝色"
          }  
       })
    </script>

效果图

$**[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QpUrdV3z-1626859626516)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1624980442488.png)]**$

2.4v-model双向绑定指令

<script src="vue.min.js"></script>
    <div id="app">
       <p>搜索1：<input type="text" v-model="keyword"></p>
       <p>搜索2：<input type="text" :value="keyword"></p>
    </div>

  <script>
     new Vue({
         el:"#app",
       data:{
           keyword:"椰子"        
       }
     })
  </script>

执行流程：

搜索栏1 中输入1111，搜索栏2随之跟着变，主要是由v-model控制，

当搜索栏输入111时，搜索1的 Keyword值（椰子1111）指向下面data中的椰子，椰子再指向上面搜索2的value

随之搜索栏2变成了（椰子1111）即双向绑定！！！！

效果图Ⅰ：

在这里插入图片描述

效果图Ⅱ：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G7Wwi5m5-1626859626523)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1624982308116.png)]$

2.5 Vue实例的生命周期

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kWj1ArvZ-1626859626524)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1624982985140.png)]$

常用的方法

created（创建对象后）：用该方法做页面初始数据的加载，页面一加载就执行该方法。

mounted（数据渲染之后）:用它来进行数据的渲染。

2.6条件渲染

<body>
    <script src="vue.min.js"></script>
    <div id="app">
        <p><input type="checkbox" v-model="agree">{{agree}}是否统同意此协议</p>
        <p v-if="!agree">上一步</p>
        <p v-if="agree">下一步</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                agree: false
            }
        })

    </script>
</body>

效果图:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3u1bS7x-1626859626525)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1625727458373.png)]$

点击后

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JBC5lZFY-1626859626525)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1625727483333.png)]$

阿支<－biubiu－⊂(`ω´∩)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
前端开发框架—初识Vue

前端开发框架—Vue一 Vue1. 基本介绍Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。2.官网https://cn.vuejs.org/3
复制链接

扫一扫

专栏目录