Vue快速入门

目录

构建项目

新建html文件

初始代码

引入vue模块

Vue常用的指令

[v-for ​编辑](#v-for 编辑)

1.在data(){}写用到的数据

2.修改div里面

v-bind

[v-if v-show](#v-if v-show)

v-on

v-model

Vue生命周期

axios

案例


构建项目

新建html文件

初始代码

引入vue模块

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>
</head>
<body>

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




    <!-- 1.引入vue模块 -->
     <script type="module">
        import{createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({
            data(){
                return {
                    msg:'hello v3'
                }
            }
        }).mount("#app");
        


     </script>


</body>
</html>

Vue常用的指令

v-for

1.在data(){}写用到的数据

2.修改div里面

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>
</head>
<body>

    <div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for ="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
           
        </table>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建应用实例
        createApp({
            data() {
                return {
                    articleList:[
	{
		title:"医疗反腐绝非砍医护收入",
		category:"时事",
		time:"2023-09-5",
		state:"已发布"
	},
	{
		title:"中国男篮缘何一败涂地?",
		category:"篮球",
		time:"2023-09-5",
		state:"草稿"
	},
	{
		title:"华山景区已受大风影响阵风达7-8级,未来24小时将持续",
		category:"旅游",
		time:"2023-09-5",
		state:"已发布"
	}
]
                }
            }
        }).mount("#app")//控制页面元素
    </script>
</body>
</html>

v-bind

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>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">百度</a>
    </div>

    <script type="module">
        //引入vue模块
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    url:"https://www.baidu.com"
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>
</html>

v-if v-show

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>
</head>

<body>
    <div id="app">

        手链价格为:  <span v-if="customer.level==1">9.9</span> 
                    <span v-else-if="customer.level==2">19.9</span> 
                    <span v-else-if="customer.level=3">29.9</span>

    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                  
                        customer:{
                            name:'张三',
                            level:1
                        }
                    
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>
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>
</head>

<body>
    <div id="app">

                    手链价格为: <span v-if="customer.level==1">9.9</span>
                    <span v-else-if="customer.level==2">19.9</span>
                    <span v-else-if="customer.level=3">29.9</span>
                    <br>
                    手链价格为: <span v-show="customer.level==1">9.9</span>
                    <span v-show="customer.level==2">19.9</span>
                    <span v-show="customer.level=3">29.9</span>

    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                  
                        customer:{
                            name:'张三',
                            level:2
                        }
                    
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

v-on

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>
</head>
<body>
    <div id="app">
        <button v-on:click="nihao">你好</button> &nbsp;
        <button @click="hello">hello</button>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            },
            methods: {
                nihao:function(){
                    alert('你好')
                },
                hello:function(){
                    alert('hello')
                }
            }
        }).mount("#app");//控制html元素

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

v-model

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>
</head>

<body>
    <div id="app">

        文章分类: <input type="text" v-model="searchConditions.category" />

        发布状态: <input type="text" v-model="searchConditions.state"/>

        <button>搜索</button>
        <button v-on:click="clear">重置</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                    searchConditions:{

                        category:'',
                        state:''
                    }
                        ,


                    articleList: [{
                        title: "医疗反腐绝非砍医护收入",
                        category: "时事",
                        time: "2023-09-5",
                        state: "已发布"
                    },
                    {
                        title: "中国男篮缘何一败涂地?",
                        category: "篮球",
                        time: "2023-09-5",
                        state: "草稿"
                    },
                    {
                        title: "华山景区已受大风影响阵风达7-8级,未来24小时将持续",
                        category: "旅游",
                        time: "2023-09-5",
                        state: "已发布"
                    }]
                }
            }
            ,
            methods: {
                clear:function(){
                    //清空数据,this代表vue实例
                    this.searchConditions.category='',
                    this.searchConditions.state=''
                }
            }
        }).mount("#app")//控制html元素

    </script>
</body>

</html>

Vue生命周期

axios

get方式

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>
</head>
<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //发送

        axios({
            method:'get',
            url:'http://localhost:8080/article/getAll'
        }).then(result =>{
            //成功的回调
            console.log(result.data);
        }).catch(err=>{ 
            console.log(err);
        });
    </script>

</body>
</html>

post方式

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>
</head>

<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //发送

        let article = {
            title: '明天会更好',
            category: '生活',
            time: '2024-10-16',
            state: '草稿'
        }

        axios({
            method: 'post',
            url: 'http://localhost:8080/article/add',

            data: {
                title: '明天会更好',
                category: '生活',
                time: '2024-10-16',
                state: '草稿'
            }

        }).then(result => {
            //成功的回调
            console.log(result.data);
        }).catch(err => {
            console.log(err);
        });
    </script>

</body>

</html>

get方式

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>
</head>

<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //发送

        let article = {
            title: '明天会更好',
            category: '生活',
            time: '2024-10-16',
            state: '草稿'
        }

        // axios({
        //     method: 'post',
        //     url: 'http://localhost:8080/article/add',

        //     data: {
        //         title: '明天会更好',
        //         category: '生活',
        //         time: '2024-10-16',
        //         state: '草稿'
        //     }

        // }).then(result => {
        //     //成功的回调
        //     console.log(result.data);
        // }).catch(err => {
        //     console.log(err);
        // });

          axios.get('http://localhost:8080/article/getAll').then(result=>{
            console.log(result.data);
          }).catch(err=>{
            console.log(err);
          })





    </script>

</body>

</html>

post

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>
</head>

<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //发送

        let article = {
            title: '好好努力呀',
            category: '励志',
            time: '2024-10-16',
            state: '已发布'
        }

        // axios({
        //     method: 'post',
        //     url: 'http://localhost:8080/article/add',

        //     data: {
        //         title: '明天会更好',
        //         category: '生活',
        //         time: '2024-10-16',
        //         state: '草稿'
        //     }

        // }).then(result => {
        //     //成功的回调
        //     console.log(result.data);
        // }).catch(err => {
        //     console.log(err);
        // });

          axios.post('http://localhost:8080/article/add',article).then(result=>{
            console.log(result.data);
          }).catch(err=>{
            console.log(err);
          })





    </script>

</body>

</html>

案例

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>
</head>

<body>
    <div id="app">

        文章分类: <input type="text" v-model="searchConditions.category">

        发布状态: <input type="text" v-model="searchConditions.state">

        <button @click="search">搜索</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>

        </table>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">  
    //  导入vue模块 
     import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
     //创建vue应用实例
     createApp({

        data(){
            return{
                articleList:[],
                searchConditions:{
                    category:'',
                    state:''

                }
            }
        },
        methods: {
            search: function(){
                axios.get('http://localhost:8080/article/search?category='+this.searchConditions.category+'&state='+this.searchConditions.state)
                .then(result=>{
                    //console.log(result.data);
                    this.articleList=result.data;
                }).catch(err=>{
                   console.log(err)
                })
            }
        },

        //钩子函数mounted中获取所有文章数据
        mounted () {
            axios.get('http://localhost:8080/article/getAll').then(result=>{
                console.log(result.data);
                this.articleList=result.data;
            }).catch(err=>{
                console.log(err);
            })
        }
     }).mount('#app');
    </script>
</body>

</html>
相关推荐
小旺仔爱代码15 分钟前
AJAX和JSON
前端·ajax·json
清灵xmf22 分钟前
JavaScript 中如何识别异步函数?
开发语言·javascript·async·异步函数
热爱前端的小君同学24 分钟前
实现插入公式的富文本框(tinymce+kityformula-editor)
vue.js
风清扬_jd44 分钟前
Chromium HTML5 新的 Input 类型search对应c++
前端·c++·html5
计算机学姐1 小时前
基于协同过滤算法的旅游网站推荐系统
vue.js·mysql·算法·mybatis·springboot·旅游·1024程序员节
解道Jdon1 小时前
重新架构:从 Redis 到 SQLite 性能提升
javascript·reactjs
逸狼1 小时前
快速入门HTML
前端·css·html
✎﹏ℳ๓₯㎕1 小时前
el-table实现固定列相同合并切重排序号
javascript·vue.js·elementui
海绵宝宝不喜欢侬1 小时前
vue + elementui 全局Loading效果
前端·vue.js·elementui
会发光的猪。2 小时前
uniapp+华为HBuilder X 4.29跑鸿蒙模拟器报错没有签名授权
javascript·vue.js·华为·uni-app·bug·harmonyos·1024程序员节