Vue基础入门学习笔记一

最新推荐文章于 2024-05-15 15:48:34 发布

呆瓜O_o

最新推荐文章于 2024-05-15 15:48:34 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/weixin_45131334/article/details/109165743

版权

文章目录

前言
一、起步
二、绑定事件和修改数据
三、条件渲染
四、列表渲染
五、Vue组件

前言

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

一、起步

创建一个html文件然后通过如下方式引入 Vue：

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

vue的简单应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
       /* 视图层：负责页面的布局和渲染*/
 
    <div id="app">
        <h1>hello {{msg}}</h1>
    </div>
  /* 数据逻辑层：交互和数据的控制 */
    <script>
        var app = new Vue({
            // 哪个元素里是使用VUE框架渲染
            el:"#app",
            // 视图层的变量数据
            data:{
                msg:"laowu"
            }
        })

    </script>

    
</body>
</html>

打印结果：
在这里插入图片描述

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

 <div id="app">
        <h1>hello {{msg}}</h1>
  </div>

 var app = new Vue({
            // 哪个元素里是使用VUE框架渲染
            el:"#app",
            // 视图层的变量数据
            data:{
                msg:"xiaowu"
            }
        })

el:指引哪个元素使用了Vue框架渲染
data：视图层的变量数据为msg:"xiaowu"

二、绑定事件和修改数据

 <!-- 
        视图层：负责页面的布局和渲染
    -->
    <div id="app">
        <h1>hello {{msg}}</h1>
        <button @click="toggleFn">切换招呼</button>
    </div>
    <!-- 数据逻辑层：交互和数据的控制 -->
    <script>
        var app = new Vue({
            // 哪个元素里是使用VUE框架渲染
            el:"#app",
            // 视图层的变量数据
            data:{
                msg:"laowu"
            },
            // 将视图层的交互方法写到methods属性里
            methods:{
                toggleFn:function(){
                    this.msg = "xiaowu"
                }
            }
        })

打印结果：点击按钮变为"laowu"变为"xiaowu"
在这里插入图片描述

@click=“toggleFn” 绑定事件相当于以往的onclick

methods:{
      toggleFn:function(){
   this.msg = "小吴"
  }
}

将视图层的交互方法写到methods属性里

三、条件渲染

v-if 使用场景

1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div class="app">
        <h1>hello {{msg}}</h1>
        <h2 v-if ="userInfo =='VIP'">欢迎尊贵的VIP进入游戏</h2>
        <h2 v-else>成为VIP用户将使你变得更加强大</h2>
        <button @click="change">改变</button>
        <button @click="guoqi">过期按钮</button>
        <button @click="chongzhi">充值</button>
    </div>
    
    <script>
        var app = new Vue({
        // 哪个元素里是使用VUE框架渲染
            el:".app",
            // 视图层的变量数据
            data:{
                msg:"老吴",
                userInfo:"VIP"
            },
            // 将视图层的交互方法写到methods属性里
            methods:{
                change:function(){
                    if(this.msg == "老吴"){
                        this.msg = "小吴"
                    }else{
                        this.msg = "老吴"
                    }
                },
                guoqi:function(){
                    this.userInfo = "normal";
                },
                chongzhi:function(){
                    this.userInfo ="VIP"
                }
            }
        })

    </script>
</body>
</html>

点击过期按钮：
在这里插入图片描述

点击充值按钮：
在这里插入图片描述
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<h2 v-if ="userInfo =='VIP'">欢迎尊贵的VIP进入游戏</h2>

也可以用 v-else 添加一个“else 块”：

   <h2 v-if ="userInfo =='VIP'">欢迎尊贵的VIP进入游戏</h2>
    <h2 v-else>成为VIP用户将使你变得更加强大</h2>

当userInfo == 'VIP'时显示：欢迎尊贵的VIP进入游戏
否则显示：成为VIP用户将使你变得更加强大

四、列表渲染

用 v-for 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

<!-- 
        视图层：负责页面的布局和渲染
    -->
    <div id="app">
        <h1>hello {{msg}}</h1>


        <!-- 明星列表 -->
        <ul>
            <li v-for="(item,i) in stars">{{i+1}}、{{item}}</li>
        </ul>

        <!-- 学生列表 -->
        <div v-for ="(item,i) in students">
            <div>姓名：{{item.username}} &nbsp; 性别：{{item.sex}}</div>
        </div>
    </div>
    <!-- 数据逻辑层：交互和数据的控制 -->
    <script>
        var app = new Vue({
            // 哪个元素里是使用VUE框架渲染
            el:"#app",
            // 视图层的变量数据
            data:{
                msg:"小吴",
                stars:["小杰","小明","小张","小胡","小吴",],
                students:[
                    {username:"小明",sex:"男"},
                    {username:"小黑",sex:"男"},
                    {username:"小白",sex:"女"},
                    {username:"小红",sex:"女"}
                ]
            }
        })

打印结果：
在这里插入图片描述

五、Vue组件

基本示例

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。（ps:具体内容请查看此处：https://cn.vuejs.org/v2/guide/components.html）

案例：

    <!-- 
        视图层：负责页面的布局和渲染
    -->
    <div id="app">
        <h1>hello {{msg}}</h1>


        <!-- 添加组件 -->
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <!-- 数据逻辑层：交互和数据的控制 -->
    <script>
       
        
       let buttonCounter =Vue.component('button-counter',{
            //视图层模板
            template:`<div><h1>{{num}}</h1><button @click='addNum'>数字加1</button>&nbsp<button @click='subNum'>数字减1</button></div>`,
            data:function(){
                return {
                    num:0
                }
            },
            methods:{
                addNum:function(){
                    this.num ++;
                },
                subNum:function(){
                    this.num --;
                }
            }
        })
        
        
        var app = new Vue({
            // 哪个元素里是使用VUE框架渲染
            el:"#app",
            // 视图层的变量数据
            data:{
                msg:"laowu"
            },
            component:{
                buttonCounter
            }
        })

打印结果：
在这里插入图片描述
点击按钮：

呆瓜O_o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础入门学习笔记一

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码
复制链接

扫一扫