Vue 快速入门

两手空空！

已于 2022-05-20 11:28:12 修改

阅读量227

点赞数 1

分类专栏： web 文章标签： vue.js javascript

于 2022-05-17 10:19:38 首次发布

本文链接：https://blog.csdn.net/m0_59392076/article/details/124815192

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue快速入门

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue指令和参数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">
<p>{{message}}</p>
<p>{{5+5+5}}</p>
    </div>


<script>
new Vue({
    //绑定到那个元素
    el:'#app',
    //数据源
    data:{
        message:"ssm-vue 全栈"
    },
    //自定义方法
    methods:{

    },
})

</script>

</body>
</html>

执行结果；

ssm-vue 全栈

15

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "app">
    <p> {{messgae}} </p>
    <p>{{5+5}}</p>

    <p><a v-bind:href="url">  qq空间 </a></p>

</div>
<script>
    new Vue({
        el:'#app',
        data:{
            messgae:"1158630056" ,

            url:"https://qzone.qq.com/"
        }
    })
</script>
</script>

</body>
</html>

执行结果

二、v-for条件指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ol>
        <li v-for="user in users" >
              {{user.name}}  
        </li>
    </ol>

</div>
<script>
    new Vue({
        el:'#app',
        data:{
            users:[
                {name:"小王"},
                {name:"小e"},
                {name:"小D"},
                {name:"小K"},
            ]
        }
    })
</script>
</script>

</body>
</html>

执行结果

三、v-model指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id ="app">
    <p>{{phone}}</p>
    手机号<input v-model ="phone">


</div>
<script>
    new Vue({
        el:'#app',
        data:{
            phone:"手机号"
        }
    })
</script>

</script>

</body>
</html>

执行结果

四、v-on和v-bind指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id ="app">
    <p>{{title}}</p>
    <button @click="changeTitle">完善标题</button>
     <a :href="url"> qq空间 </a> 
   

</div>
<script>
    new Vue({
        el:'#app',
        data:{
            title:"面试专题",
            url:"https://qzone.qq.com/",
        },
       
        

        methods:{
            changeTitle:function(){
                this.title= "||小滴课堂 2020年"+this.title ;
            }
        }

    })
</script>

</script>

</body>
</html>

五、 component组件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id ="app">
    
   <xd_component message="qq空间 https://qzone.qq.com/"></xd_component>

</div>
<script>
    Vue.component('xd_component',{

        props:{
            message:{
                type : String
        }
         },
         data : function(){
             return {
                 count : 0
             }
         },
         template : '<button @click="count++">{{message}} 点击 {{count}}次 </button>'
        })



    new Vue({
        el:'#app',
    data:{
            title:"面试专题",
            url:"https://qzone.qq.com/",
        },
       
        

        methods:{
            changeTitle:function(){
                this.title= "||小滴课堂 2020年"+this.title ;
            }
        }

    })
</script>

</script>

</body>
</html>

props的作用是像组件传值

六、Vue快速配置

配置镜像淘宝脚手架

打开cmd在命令行中输入

npm config set registry https://registry.nmp.taobao.org

安装全局脚手架

打开cmd在命令行中输入

npm install -g @vue/cli

未来所有的前端项目都可以使用这个cli工具

用Idea或者VScode打开前端项目

运行项目的命令

npm run serve

两手空空！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 快速入门

Vue快速入门目录一、Vue指令和参数二、v-for条件指令三、v-model指令四、v-on和v-bind指令五、component组件提示：以下是本篇文章正文内容，下面案例可供参考一、Vue指令和参数<!DOCTYPE html><html><head><meta charset="utf-8"><title>⼩滴课堂vue快速⼊⻔</title>..
复制链接

扫一扫