【Vue.js】vuejs基本语法

vue.min.js地址：　　https://cn.vuejs.org/js/vue.min.js

vue 文档： https://vuejs.org/guide/introduction.html

使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

CDN vue.min.js

引用vue.min.js

<script src="vue.min.js"></script>

每个 Vue 应用都需要通过实例化 Vue 来实现。

<script>
    // 每个 Vue 应用都需要通过实例化 Vue 来实现。
    new Vue({
        // el 参数，它是DOM元素中的 id
        el:'#app',
        // data 用于定义属性
        data:{
            // 数据
            message:"Vue_Hello World！~"
        },
        // methods 用于定义的函数
        methods:{
        }
    })
</script>

数据绑定

　　最常见的形式就是使用 {{...}}（双大括号）的文本插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <!--绑定元素-->
    <div id="app">
        <h1>HTML_HelloWorld !~</h1>
        <!--数据绑定 写法： {{...}} 用于输出对象属性和函数返回值-->
        <h1>{{ message }}</h1>

    </div>
<script>
    // 每个 Vue 应用都需要通过实例化 Vue 来实现。
    new Vue({
        // el 参数，它是DOM元素中的 id
        el:'#app',
        // data 用于定义属性
        data:{
            // 数据
            message:"Vue_Hello World！~"
        },
        // methods 用于定义的函数
        methods:{
            doSamothing:function(){
　　　　 　　 }
        }
    })
</script>
</body>
</html>

指令

指令是带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上

v-html 输出html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-html 用于输出 html 代码-->
        <div v-html="message"></div>
    </div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"Vue_Hello World！~"
        }
    })
</script>
</body>
</html>

参数

参数在指令后以冒号指明

v-bind HTML属性中的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <!-- HTML属性中的值应使用 v-bind 指令, href 是参数 -->
        <pre><a v-bind:href="url">百度一下</a></pre>
        <div v-bind:class="{'class1':use}">
            v-bind:class 指令
        </div>
    </div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"Vue_Hello World！~",
            url:'http://www.baidu.com',
            use:false
        }
    })
</script>
</body>
</html>

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

v-model 双向数据绑定

用于 input、select、textarea、checkbox、radio 等表单控件元素

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <!--绑定元素-->
    <div id="app">
        <h1>HTML_HelloWorld !~</h1>
        <!--数据绑定 写法： {{...}} 用于输出对象属性和函数返回值-->
        <h1>{{ message }}</h1>
        <!-- 数据双向绑定 写法：v-model 用于 input、select、textarea、checkbox、radio 等表单控件元素-->
        <!-- 好处：所有引用message值的地方同步删改 -->
        <input type="text" v-model="message">
    </div>
<script>
    // 每个 Vue 应用都需要通过实例化 Vue 来实现。
    new Vue({
        // el 参数，它是DOM元素中的 id
        el:'#app',
        // data 用于定义属性
        data:{
            // 数据
            message:"Vue_Hello World！~"
        },
        // methods 用于定义的函数
        methods:{
        }
    })
</script>
</body>
</html>

v-if 根据表达式的值(true 或 false )来决定是否执行元素操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 如果seen = true 则显示p内容 否则显示内容-->
        <p v-if="seen">现在你看到我了</p>
        <a v-if="!seen">this is what</a>
    </div>

    <script>
    var nv = new Vue({
        el: '#app',
        data: {
            seen: true
      }
    })
    </script>
</body>
</html>

v-on 监听DOM 事件，参数是监听的事件名

<a v-on:click="doSomething">
<!-- 缩写 -->
<a @click="doSomething"></a>

缩写

v-bind缩写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
    <!-- HTML属性中的值应使用 v-bind 指令, href 是参数 -->
    <pre><a v-bind:href="url">百度一下</a></pre>
    <div :class="{'class1':use}">
    v-bind:class 指令
</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"Vue_Hello World！~",
            url:'http://www.baidu.com',
            use:false
        }
    })
</script>
</body>
</html>

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_demo</title>
    <script src="vue.min.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
    <!-- HTML属性中的值应使用 v-bind 指令, href 是参数 -->
    <pre><a v-bind:href="url">百度一下</a></pre>
    <div :class="{'class1':use}">
        v-bind:class 指令
    </div>
    <br/>
    <form action="demo.html" v-on:submit="submitFun">
        <button type="submit">提交</button>
    </form>
</div>
<script>
    var nv = new Vue({
        el:'#app',
        data:{
            message:"Vue_Hello World！~",
            url:'http://www.baidu.com',
            use:false
        },
        methods:{
            submitFun:function(){
                alert("提交提示")
            }
        }
    })
</script>
</body>
</html>

组件

　　组件可以扩展HTML元素，封装可重用的代码

　　参考地址：https://www.jianshu.com/p/bb4a347b903a

拓展

问题1：页面不展示vue的data数据

解决方法：pom.xml添加依赖

        <!-- 模板引擎 Thymeleaf 依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>3.1.2</version>
        </dependency>

posted @ 2022-05-19 17:25 Phoenixy 阅读(176) 评论(0) 收藏举报

刷新页面返回顶部