vue笔记

最新推荐文章于 2024-03-01 17:25:35 发布

#小蚂蚁

最新推荐文章于 2024-03-01 17:25:35 发布

阅读量64

点赞数 2

分类专栏：学习笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_44621891/article/details/109710001

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

学习笔记

<div id="app">
    <span v-bind:title="message" v-on:click="sayHi">
        {{message}}
    </span>
</div>

/*创建一个vue对象*/
 let vm = new Vue({
 		/*绑定一个id为app的元素*/
        el: "#app",
        /*声明出数据，在html中可使用{{key}}读取*/
        data: {
            message: "hello!Vue"
        }
        methods:{
            sayHi:function(){
            	 alert(this.message);
            }
        }
    });

逻辑判断

v-if="boolean"
v-else-if
v-else

数据遍历

v-for="(item,index) in items"

数据绑定和事件绑定

v-bind:简写:
v-on：简写 @
v-model:数据双向绑定

vue组件化

		/*定义的组件名称*/	
Vue.component("ysk",{
        props:["key"],/*可传入的参数*/
        template:'<li>{{key}}</li>'
    });

axios

var vm = new Vue({
        el: "#vue",
        data:{
            //请求的返回参数格式，必须和json字符串一样
            info:{
               name: null
            }
        },
        mounted(){//钩子函数,链式编程
			axios.get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
					/*参数*/
                    params: {
                        id: 5
                    }
                })/*回调函数，响应数据*/
                .then(res => {
                    console.log('数据是:', res);
                })
                .catch((e) => {
                    console.log('获取数据失败');
                })
		}
    });

计算属性：

与方法类似，调用时无需小括号，其中数据保存在缓存中不会多次计算
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

slot插槽

<组件名>
        <p slot="绑定到插槽的名字" :tit="可以传入的参数值"></ctitle>
        <item slot="s_item" v-for="iti in itis" v-bind:iti="iti"></item>
</组件名>

Vue.component("组件名",{
        template:
            '<div>\
                <slot name="插槽名"></slot>\
                <ul>\
                    <slot name="插槽名2"></slot>\
                </ul>\
            </div>'
    });

$emit：事件分发，当前组件只可调用当前组件内的方法，使用emit(‘自定义事件名’)，即可调用

<!DOCTYPE html>
<html lang="en"
      xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <computer>
        <ctitle slot="s_ctitle" :tit="tit"></ctitle>
        <item slot="s_item" v-for="(iti,index) in itis"
              v-bind:iti="iti" :index="index" v-on:del="rmItems(index)"></item>
    </computer>

</div>

<script src="vue.js"></script>
<script>
    Vue.component("computer",{
        template:
            '<div>\
                <slot name="s_ctitle"></slot>\
                <ul>\
                    <slot name="s_item"></slot>\
                </ul>\
            </div>'
    });
    Vue.component("ctitle",{
        props:['tit'],
       template: '<p>{{tit}}</p>'
    });
    Vue.component("item",{
        props:['iti','index'],
        template: '<li>{{index}}<a href="#">{{iti}}</a><button v-on:click="rm()">删除</button></li>',
        methods:{
            rm:function(){
            	/*自定义事件分发*/
                this.$emit("del");
            }
        }
    });
    let vm=new Vue({
        el:"#app",
        data:{
            tit:'计算机',
            itis:['显示器','键盘','鼠标']
        },
        methods:{
          rmItems:function(index){
              console.log("删除了"+this.itis[index]);
              this.itis.splice(index,1);
          }
        }
    });
</script>
</body>
</html>

以上事件执行过程：
v-on:click="rm()">this.$emit("del");>v-on:del="rmItems(index)">rmItems

#小蚂蚁

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue笔记

/*创建一个vue对象*/ let vm = new Vue({ /*绑定一个id为app的元素*/ el: "#app", /*声明出数据，在html中可使用{{key}}读取*/ data: { message: "hello!Vue" } });逻辑判断v-ifv-else-ifv-else...
复制链接

扫一扫