20181029 Vue小结

最新推荐文章于 2023-02-22 23:57:31 发布

宫城诗

最新推荐文章于 2023-02-22 23:57:31 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_36344771/article/details/83514940

Vue 专栏收录该内容

46 篇文章

订阅专栏

本文介绍如何使用Vue.js创建动态列表，并实现数据的双向绑定。通过实例讲解了组件的定义与使用，包括全局组件与局部组件的区别，以及如何在组件间传递属性。

小总结：
首先要引入vue.js的包
然后声明一个变量利用vue的函数创建实例，
el：//是限制范围 vue实例接管哪个标签里的内容

data： //数据

外部函数想要调用数据
实例对象名.$实例想要的内个参数对象.属性的名字="//进行更改

v-for在标签的属性中写，这样就会遍历vue实例中所需要的list中所有的东西
然后在调用利用{{}}进行进行调用

绑定事件 v-on
：之后用来修饰事件
然后在vue的实例对象中定义一个methods的键值对这样，才能调用

如果想拿input type=“text” 中的数据，v-model=“inputValue”
数据的双向绑定当input框里的数据发生变化的时候，inputValue也会发生变化

Vue.component(“todoitem”,{
这里面需要一个模板 template:" "
})

定义组件名的方式有两种：

使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如。

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

v-bind 相当于item in list 在vue实例对象的data属性中有list的数组，通过循环每次用item展现出来。
你在全局组件模块定义了模板 template:"",再用props content通过v-bind:content="item"接受属性，这样每次循环的时候直接复制的是模板

还有局部组件
components:{}是通过对象来注册
与data一样

组件化实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <!--<li v-for="item in list">{{item}}</li>-->
        <todo-item  v-for="item in list" v-bind:content="item"></todo-item>

    </ul>
</div>
<script>
    var TodoItem={
        props:['content'],
        template:"<li>{{content}}</li>"
    };
    var app=new Vue({
        el:"#app",
        components:{
            TodoItem:TodoItem
        },
        data:{
            list:["xixi","hhah"],
            inputValue:''
        },
        methods:{
            handleBtnClick:function () {
                this.list.push(this.inputValue)
                alert(this.inputValue);
            }
        }
    })
</script>
</body>
</html>

v-on:click 与 @click相同