Java-vue简单学习

最新推荐文章于 2024-08-23 13:45:56 发布

苹果和狗

最新推荐文章于 2024-08-23 13:45:56 发布

阅读量1.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44824745/article/details/100025667

版权

本文是关于Vue.js的学习指南，涵盖了Vue的基本概念、数据绑定、跑马灯效果、双向绑定、简易计算器、for循环及其应用以及过滤器的实现。Vue.js是一个轻量级的框架，专注于视图层，易于学习并与其他库或项目整合。

摘要由CSDN通过智能技术生成

文章目录

Vue.js 是什么
代码实现

Vue.js 是什么

官网：http://doc.vue-js.com/v2/guide/

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

代码实现

前期准备

安装vue的插件
在这里插入图片描述

下载vue(推荐) 地址：https://github.com/vuejs/vue

新建lib目录导入：
在这里插入图片描述

1.入门及插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        [v-cloak]{
    
            display:none;
        }
    </style>
</head>
<body>

<div id="app">

    <!--
    在网页加载的时候，网页会显示 {
   {msg1}} ，直到加载完会突然变成 hello，Vue
    -->
    <p>{
  {msg1}}</p>

    <!--
    v-cloak 在style标签下设置 display:none;
    在网页加载的时候，网页不会显示任何东西 ，直到加载完会显示msg1属性的值 hello，Vue
    -->
    <p v-cloak>{
  {msg1}}</p>

    <!--
    v-text 在网页加载的时候，网页不会显示任何东西 ，直到加载完会显示msg1属性的值 hello，Vue
    -->
    <p v-text = "msg1"/>

    <!--
    会显示 <h1>hello,h1</h1>，不能解析<h1>等标签
    -->
    <p v-text = "msg2"/>

    <!--可以解析<h1>等标签-->
    <p v-html = "msg2"/>
</div>

<!--引入Vue.js(script不可以自闭合)-->
<script src="../lib/vue.js"></script>
<script>

    //使用Vue
    var vm = new Vue({
    
        //绑定元素
        el:"#app",
        //传递数据
        data:{
    
            /*
            在写项目时这里的数据实际上是从后端取过来的
            Controller
            @responseBody
            JSON

            请求 ${content}/hello
             */
            msg1:"Hello,Vue",
            msg2:"<h1>hello,h1</h1>"
        }
    })
</script>

</body>
</html>

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

在console控制台输出vm.msg1=“hahahaha”,回车后结果如下：
在这里插入图片描述

2.绑定数据

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <!--
     v-bind:  用于绑定html元素属性的值
     可以简化为一个冒号  ：
     只要表达式合法，就能执行
        变量 + 变量
        变量 + 字符串常量等都可以
      -->
    <p>用户名：<input type="text" name="username" v-bind:value="msg1"></p>
    <p>用户名：<input type="text" name="username" :value="msg1"></p>
    <p>用户名：<input type="text" name="username" :value="msg1+'字符串'+msg1"></p>
    <br>


    <!--调用方法-->
    <button onclick="f()">点击</button> <br><br>

    <!--  v-on--方法调用,绑定方法  可以简化为 @   -->
    <button v-on:click="m1()"