vue学习基础

最新推荐文章于 2024-05-18 14:56:52 发布

Y-S-P

最新推荐文章于 2024-05-18 14:56:52 发布

阅读量227

点赞数

本文链接：https://blog.csdn.net/YSPLX/article/details/113844475

版权

首先要知道vue的7个属性

el属性		data属性 		template属性 		methods属性		render属性		computed属性		watch属性

① 必须使用到的（内容渲染）：

el属性：你可以理解为   div  中的 id  唯一标识。
data属性 ：可以理解为，数据
简单的使用例子：（html中需要使用{{ }}来渲染data中的内容）
 <div id = "app">{{msg}}</div>
  <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"这是msg"
            }
        })
    </script>

② 方法调用（methods 注意是s，不是method）主要就是，定义方法，方法调用

监听事件 v-on
v-on 的缩写是 @
常用的有@click点击事件、@change域的内容发生改变时触发的事件、@mouseenter鼠标移入事件、@mouseleave鼠标移出事件、@mousemove鼠标移动事件、@mousedown鼠标按下事件、@mouseup鼠标松开事件、@input输入文本时触发的事件、@focus获取焦点事件、@blur失去焦点事件等等

<div id = "app">
    <button v-on:click="sayHi">click Me</button>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"这是msg"
        },
        methods:{
            sayHi:function (e) {
                console.log(this.msg)
            }
        }
    })
</script>

③ 还有一些，简单的绑定，if else for ，简单写一下
绑定就是跟data里面自定义属性，绑定渲染

绑定数据 v-bind
v-bind 的缩写是 ：
v-for="item in items"
v-model 双向绑定
 
:title、:class、:style、:key、:item、:index、:src、:href

 <h1 v-if="type==='A'">yes</h1>
 <h1 v-else>no</h1>
 data:{
            type:"A"
        }
 -----------------------------
 <li v-for="item in items">
{{item.msg}}
</li>
data:{
                items:[{meg:"这是001"},{meg:"002"}]
}

④ 组件的使用（自定义名称）
数组遍历，绑定，渲染例子：

 Vue.component("自定义那个名称（在页面中渲染使用）",{
        props:["yyy"],			//参数
        template: "<li>{{yyy}}</li>"		//自定义模板
    });

<div id = "app">
    <ysp v-for="item in items" v-bind:yyy="item"></ysp>
</div>

<script>
    Vue.component("ysp",{
        props:["yyy"],	//参数传递，需要使用props来绑定传递。
        template: "<li>{{yyy}}</li>"	//参数的值
    });
    var vm = new Vue({
        el:"#app",
        data:{
            items: ["java","html","linux"]
        }
    })
</script>

⑤插槽的使用：
(原理：利用组件模板，自定义插槽，动态渲染数据)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<div id = "app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items>
    </todo>
</div>

<body>
<script>

    Vue.component("todo",{
        template:"<div>\
                    <slot name='todo-title'></slot>\
                    <ul>\
                        <slot name='todo-items'></slot>\
                    </ul>\
                </div>"
    });
    Vue.component("todo-title",{
        props:["title"],
        template:"<div>{{title}}</div>"
    });
    Vue.component("todo-items",{
        props:["item"],
        template:"<li>{{item}}</li>"
    });
    var vm = new Vue({
        el:"#app",
        data: {
            title: "ysp",
            items: ["html","java","linux"]
        }
    })
</script>
</body>
</html>

对应关系：
在这里插入图片描述
⑥自定义事件（组件之间，事件函数的调用），比较难一点：

this.$emit("自定义的函数名称",参数)
this.$emit("aa",index)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<div id = "app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" v-on:aa="removeItem(index)" :item="item" :index="index"></todo-items>
    </todo>
</div>

<body>
<script>

    Vue.component("todo",{
        template:"<div>\
                    <slot name='todo-title'></slot>\
                    <ul>\
                        <slot name='todo-items'></slot>\
                    </ul>\
                </div>"
    });
    Vue.component("todo-title",{
        props:["title"],
        template:"<div>{{title}}</div>"
    });
    Vue.component("todo-items",{
        props:["item","index"],
        template:"<li>{{index}}----{{item}}<button @click='remove(index)'>删除</button></li> ",
        methods:{
            remove:function (index) {
                this.$emit("aa",index)
            }
        }
    });
    var vm = new Vue({
        el:"#app",
        data: {
            title: "ysp",
            items: ["html","java","linux"]
        },
        methods: {
            removeItem:function (index) {
                alert("删除了："+index)
            }
        }
    })
</script>
</body>
</html>

⑦axios的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<div id = "app">
    <div>{{info.name}}</div>
    <div>{{info.url}}</div>
</div>
<body>
<script>
    var vm = new Vue({
        el:"#app",
        data(){
            return{
                info:{
                    name: null,
                    url: null,
                    address:{
                        city:null
                    }
                }
            }
        },
        mounted(){
            axios.get("data.json").then(response=>(this.info=response.data));
        }
    })
</script>
</body>
</html>

data.json

{
  "name": "ysp",
  "url": "www.baidu.com",
  "address": {
    "city": "handan"
  }
}

Y-S-P

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue学习基础

首先要知道vue的7个属性el属性 data属性 template属性 methods属性 render属性 computed属性 watch属性① 必须使用到的（内容渲染）：el属性：你可以理解为 div 中的 id 唯一标识。data属性：可以理解为，数据简单的使用例子：（html中需要使用{{ }}来渲染data中的内容） <div id = "app">{{msg}}</div> <script> var
复制链接

扫一扫