Vue 学习哈！

weixin_45275399

已于 2022-08-05 14:24:43 修改

阅读量97

点赞数

分类专栏：前端文章标签： vue.js 学习前端

于 2022-08-02 17:56:39 首次发布

本文链接：https://blog.csdn.net/weixin_45275399/article/details/126127374

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端开发常见工具：
VScode
Hubilder
Sublime
Webstrom

新建文件夹：idea -》 open
file-》setting-》plugins-》搜索vue，安装vue.js插件
安装之后，项目名-》右键-》New ，会有Vue Component

对控制台的对象进行操作，网页可以实时更新
一、第一个Vue程序

<body>
<!--view .js-->
<div id="app">
    <h1>{{message}}</h1>
</div>

<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>

    var vm=new Vue({
        el:"#app",
        //Model   
        data:{
            message:"hello,kuangshen!"
        }
    })
</script>
</body>

二、Vue基本语法（判断、循环）
1、判断

<body>
<!--view .js-->
<div id="app">
    <h1 v-if="message==='a'">ok</h1>
    <h2 v-else-if="message!='a'">nota</h2>
</div>

<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>

    var vm=new Vue({
        el:"#app",
        //Model   
        data:{
            message:"a"
        }
    })
</script>
</body>

2、循环

<body>
<!--view .js-->
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>

    var vm=new Vue({
        el:"#app",
        //Model   
        data:{items:[{message:"message1"},{message:"message2"}]}
    })
</script>
</body>

三、Vue绑定事件（on）

<body>
<div id="add">
<button v-on:click="sayHi">click me</button>
</div>
<!--方法定义在vue的method中-->
<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<script>
    var vm=new Vue({
        el:"#add",
        data:{message:"message1"},
        methods:{
            sayHi:function(event){
                alert(this.message);
            }
        }
    })
</script>
</body>

四、Vue双向绑定（v-model）
在这里插入图片描述

Vue双向绑定：
1.数据发生变化，视图也发生变化（f12-》vm.message=“新数据”）
2.视图发生变化，数据也发生变化

如：
单文本
(
input用v-model绑定data中的message，{{message}}直接展示data中的message，
相当于input绑定了{{message}},视图改变，数据{{message}}也会改变
)

<body>
<div id="add">
    <input type="text" v-model="message"/>   {{message}}

</div>
<!--方法定义在vue的method中-->
<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<script>
    var vm=new Vue({
        el:"#add",
        data:{message:"xixi"},
    })
</script>
</body>

文本框

<!--文本框-->
<div id="add">
    <textarea v-model="message"></textarea>
    {{message}}
</div>
<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<script>
    var vm=new Vue({
        el:"#add",
        data:{message:""},
    })
</script>

单选按钮

<!--单选按钮-->
<div id="add">
   <input type="radio" value="男" v-model="message"/>男
    <input type="radio" value="女" v-model="message"/>女
    {{message}}
</div>
<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<script>
    var vm=new Vue({
        el:"#add",
        data:{message:""},
    })
</script>

下拉框

<body>
<!--下拉框-->
<div id="add">
<select v-model="message">
    <option value="">--请选择--</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
    {{message}}
</div>
<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<script>
    var vm=new Vue({
        el:"#add",
        data:{message:""},
    })
</script>
</body>

五、Vue组件
自定义标签

组件必须放在vue对象标签里

<body>
<!--Vue 对象-->
<div id="add">
    <qmz></qmz>
</div>
<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<script>
    Vue.component("qmz",{template:'<li>xixixixi</li>'})
    
    var vm=new Vue({
        el:"#add"
    })
</script>
</body>

<body>
<!--Vue 对象-->
<div id="add">
    <qmz v-for="item in items" v-bind:qq="item" ></qmz>
</div>
<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<script>
    Vue.component(
        "qmz",
        {
            props:['qq'],
            template:'<li>{{qq}}</li>'
        }
        )

    var vm=new Vue({
        el:"#add",
        data:{
            items:["java","mysql","lambda"]
        }
    })
</script>
</body>

六、Axios
七、Vue计算属性
计算属性相当于缓存。
计算属性存在的目的就是将不经常变化的属性缓存起来。
八、插槽slot
1.插槽基本使用

<body>
<!--Vue 对象-->
<div id="add">
    <qmz></qmz>
    <qmz><h1>我是改变第一条</h1></qmz>
    <qmz><h1>我是改变第二块</h1><p>我是改变第二块2</p></qmz>
</div>
<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<script>
    Vue.component("qmz",
        {
        template:'<div><li>xixixixi</li><slot><h1>我是默认那一条</h1></slot></div>'
        })
    
    var vm=new Vue({
        el:"#add"
    })
</script>
</body>

插槽基本使用<slot></slot>
插槽默认值<slot>默认值</slot>
如果有多个值，同时放到组件中替换时，同时作为替换元素

2.具名插槽

<body>
<!--Vue 对象-->
<div id="add">
    <qmz></qmz>
    <qmz><h1 slot="one">我是改变第一条</h1></qmz>
    <qmz><h1>我是改变第二块</h1><p>我是改变第二块2</p></qmz>
</div>
<!--vue cdn-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<script>
    Vue.component("qmz",
        {
            template:
                '<div><li>xixixixi</li><slot name="one"><h1>我是默认第一条</h1></slot><slot name="two"><h1>我是默认第二条</h1></slot></div>'
        })

    var vm=new Vue({
        el:"#add"
    })
</script>
</body>