【实训】_第四天

最新推荐文章于 2022-05-27 17:10:40 发布

蛋蒸

最新推荐文章于 2022-05-27 17:10:40 发布

阅读量78

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45156425/article/details/111919947

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

【实训】第四天

vue
用于构建用户界面的渐进式框架。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="vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
        <div v-bind:title="message1">
          将光标悬浮几秒钟后将会看看
        </div>
        <!-- v-if条件渲染 -->
        <div v-if="isTrue">测试-{{message}}</div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '山东农业大学',
                message1:'页面加载于 ' + new Date().toLocaleString(),
                isTrue:false
            }
        })

    </script>
</body>

</html>

运行结果
在这里插入图片描述

DOM
HTML的body里边包含的所有标签。

条件和循环

<!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="vue.js"></script>
</head>
<body>
    <div id="app">
       <div v-for="item in arr">{{item.text}}</div>
    </div>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                arr:[
                    {text:"熊大"},
                    {text:"熊二"},
                    {text:"光头强"}
                ]
            }
        })
    </script>
</body>
</html>

运行结果
在这里插入图片描述

消息反转按钮

<!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="vue.js"></script>
</head>

<body>
    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
        <input v-model="message" />
    </div>

    <script>
        var app5 = new Vue({
            el: '#app-5',
            data: { message: '山东农业大学计算机专业' },
            //生命周期开始
            created(){
                console.log("生命周期从这里开始")
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })

    </script>
</body>

</html>

在这里插入图片描述

处理用户的输入

vue实例
生命周期的钩子
每个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="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 1 {{属性名}} -->
        <div>{{message}}</div>
         <!-- 2 v-html进行插值 -->
        <div v-html="message"></div>
        <!-- 3 v-text进行插值 -->
        <div v-text="message"></div>
       <!-- 4 通过数据绑定的方式进行插值 -->
        <div v-bind:title="message">
            将光标悬浮几秒钟后将会看看
        </div>
        <button v-on:click="clickEv">点击我</button>
         <!-- v-bind简写 ： -->
        <div :title="message">
            将光标悬浮几秒钟后将会看看111
        </div>
        <!-- v-on @ -->
        <button @click="clickEv">点击我@</button>

    </div>

    <script>
        var app5 = new Vue({
            el: '#app',
            data: { 
                message: '山东农业大学计算机专业' 
            },
            methods:{
                clickEv:function (){
                    console.log("我是按钮，我被点击了")
                }
            }
            
        })

    </script>
</body>

</html>

运行结果
在这里插入图片描述

vue指令语法
指令是带有v前缀的特殊attribute

计算属性
重点是记住computed:

收获与感想：今天学习了vue的初步用法。vue是一种目前上企业流行的自底向上的框架。主要关注视图层。通过今天的学习，我成功的在浏览器上运行了使用vue框架的网页程序（几个小组件）。希望明天能学会更多有用的知识。

蛋蒸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【实训】_第四天

【实训】第四天vue用于构建用户界面的渐进式框架。vue的核心库之关系视图层。声明式渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
复制链接

扫一扫