前端-vue 基本语法

最新推荐文章于 2022-11-24 11:19:55 发布

搬砖大强

最新推荐文章于 2022-11-24 11:19:55 发布

阅读量152

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_45020244/article/details/109391780

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!--
* @description  参数1
* @fileName  vue01
* @author userName
* @date 2020-10-29 11:28:04
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue01</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-bind 单向数据绑定 这个指令一般用在标签属性里-->
    <h1 v-bind:title="message">
        {{content}}
    </h1>
        <!--简写形势-->
    <h2  :title="message">
        {{content}}
    </h2>
    <!--单向绑定--->
    <input type="text" v-bind:value="searchMap.keyword"/>
    <!--双向绑定--->
    <input type="text" v-model="searchMap.keyword"/>

    <p>{{searchMap.keyword}}</p>
    <!--vue绑定事件-->
    <button v-on:click="search()">查询</button>
     <!--vue 简写绑定事件-->
     <button @click="search">查询1</button>

     <!---修饰符-->
     <form action="save"  v-on:submit.prevent="onsunmit">
         <input type="text" id="name" v-model="user.username"/>
         <button type="submit" >保存</button>
     </form>
    
      <!--v-if-->
     <input type="checkbox" v-model="ok"/> 是否同意加班
     <h1 v-if="ok">今天上班</h1>
     <h1 v-else>今天不上班</h1>
     <!--循环指令-->
     <ul>
         <li v-for="(n,index) in 5">
             {{n}}---{{index}}
         </li>
     </ul>
     <ol>
         <li v-for="i in 5">
            {{i}}
         </li>
     </ol>
     <hr/>
     <table border="2">
         <tr v-for="user in userList">
             <td>{{user.id}}</td>
             <td>{{user.name}}</td>
             <td>{{user.age}}</td>
             <td>{{user.sex}}</td>

         </tr>
     </table>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    content: "我是标题" ,
                    message: "页面加载于 " + new Date().toLocaleString(),
                    user:{

                    },
                    searchMap: {
                        keyword: "123456"
                    },
                    result: {},
                    ok: true ,
                    userList:[
                        {"id":1,"name":"wzq01","age":21,"sex":"female"},
                        {"id":2,"name":"wzq02","age":22,"sex":"male"},
                        {"id":3,"name":"wzq03","age":23,"sex":"female"}
                    ]
                }
            },
            created()	{ // 实例被创建之后执行代码

            },
            computed: { // 计算属性

            },
            components: { // 组件的引用

            },
            methods: { // 方法
                search(){
                    console.log("输出方法")
                },

                f1(){
                    console.log("输出分f1")
                },
                onsunmit(){
                    if(this.user.username){
                        console.log("username 有值")
                    }else{
                        alert("请输入用户名")

                    }

                }
            },
            mounted()	{ // 页面进入时加载内容

            },
            watch: { // 监测变化

            }
        });

    </script>
</body>

</html>

                          效果图

在这里插入图片描述

搬砖大强

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端-vue 基本语法

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid
复制链接

扫一扫