学习Vue之前先要学习html+css+js的基础使用

Vue其实是js的框架

常用到的Vue指令包括vue-on,vue-for,vue-blind,vue-if&vue-show,v-modul

vue的基础模板:

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script type="module">
        import{createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({
            data(){
                return{
                    msg:'hello vue3'
                }
            }
        }).mount("#app");
    </script>
</body>
</html>

常用到的Vue指令:

  1. v-for
    <!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>
    <!--             <tr>
                    <td>标题2</td>
                    <td>分类2</td>
                    <td>2000-01-01</td>
                    <td>已发布</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
                <tr>
                    <td>标题3</td>
                    <td>分类3</td>
                    <td>2000-01-01</td>
                    <td>已发布</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>
  2. v-blind
     
    <!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 href="https://www.itheima.com">黑马官网</a> -->
             <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.itheima.com'
                    }
                }
            }).mount("#app")//控制html元素
        </script>
    </body>
    </html>
  3. v-if&&v-show
     
    <!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>9.9</span>  <span>19.9</span> <span>29.9</span> -->
    
            <span v-if="customer.level>=0 && customer.level<=1">9.9</span>
            <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span>
            <span v-else>29.9</span>
    
            <br>
            <span v-show="customer.level>=0 && customer.level<=1">9.9</span>
            <span v-show="customer.level>=2 && customer.level<=4">19.9</span>
            <span v-show>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:3
                        }
                    }
                }
            }).mount("#app")//控制html元素
        </script>
    </body>
    
    </html>
  4. v-on
     
    <!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="money">点我有惊喜</button> &nbsp;
            <button v-on:click="love">再点更惊喜</button>
        </div>
    
        <script type="module">
            //导入vue模块
            import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    
            //创建vue应用实例
            createApp({
                data() {
                    return {
                        //定义数据
                    }
                },
                methods:{
                    money: function(){
                        alert('123')
                    },
                    love: function(){
                        alert('456')
                    }
                }
            }).mount("#app");//控制html元素
    
        </script>
    </body>
    </html>
  5. v-module
    <!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-modul="searchConditions.category"/><span>{{searchConditions.category}}</span>
    
            发布状态: <input type="text" v-modul="searchConditions.state"/><span>{{searchConditions.state}}</span>
    
            <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 {
                        //定义数据
                        methods:{
                            clear:function(){
                                //清空category里的数据
                            }
                        },
                        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: "已发布"
                        }]
                    }
                },
                mounted: function() {
                    console.log('vue挂载完毕,发送请求获取数据')
                }
            }).mount("#app")//控制html元素
        </script>
    </body>
    
    </html>

    axios使用:
     

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 引入axios的js文件 -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            /* 发送请求 */
            axios({
                method:'get',
                url:'http//localhost:8080/article/getAll'
            }).then(result=>{
                //成功的回调
                //result代表服务器响应的所有数据,包含了响应头,响应体,result.data 代表的是接口响应的核心数据
                console.log(result.data)
            }).catch(err=>{
                //失败的回调
                console.log(err)
            });
    
    /*         // 使用别名的方式发送请求
            axios.get('http//localhost:8080/article/getAll').then(result=>{
                //成功的回调
                //result代表服务器响应的所有数据,包含了响应头,响应体,result.data 代表的是接口响应的核心数据
                console.log(result.data)
            }).catch(err=>{
                //失败的回调
                console.log(err)
            }); */
        </script>
    </body>
    </html>

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部