Vue入门基础知识

一、Vue入门基础知识

1、Vue使用的基本操作

i. 先下载，引入vue.js
ii. Vue，实例化一个vue实例化对象（new Vue({})）
    1. 新建一个vue实例化对象（Vue是一个构造函数）
    2. 执行vue构造函数中每一句代码
    3. 将新创建的vue实例化对象赋值给vue构造函数中的this

iii. 往vue实例化对象中传入一个对象（Vue实例化传入的对象里面的值也都为对象，以键值形式对存在，如data对象）

2、Vue的基础知识（应用：普通版的todolist（待办事项））

1) el: 节点挂载

限定Vue语法的作用范围

2) Data(需要渲染的数据，Vue 实例的数据对象)

    a) data的类型可以为：Object | Function。

    注：组件的定义只接受 function（因为函数有自己的作用域，每一个实例的data属性都是独立的）

    b) data可以为：

        1.    自定义数据

        2.    通过ajax获取的后台数据

        3.    Data是一个函数

 3）Vue语法，实现对(DOM)节点的渲染、删除、添加

    a) 模板渲染{{ obj }}（data中的数据可以直接在html中显示,让js变量直接在html中使用）

    b) v-for (列表渲染，使用for循环遍历数据生成节点，遍历对象和数组)，数据驱动视图

    使用：1. 用 v-for 把一个数组对应为一组元素

                v-for=”(item,index) in list”

               list为源数据数组并且item是数组元素迭代的别名

                index为当前项的索引

                2、一个对象的 v-for

                v-for="（value,key） in object"

                object为data中定义的一个对象，value为对象的值，key为对象的键名

    c) 条件渲染v-if、v-show（使用数据隐藏和显示节点）
        1.v-if删除了节点
        2.v-show隐藏了节点(使用display:none隐藏了节点)

  d )删除节点，使用@click时间并在methods中定义delitem删除函数，并用v-bind绑定自定义属性，如：:data-id="item.id"

        事件处理@click与回调函数methods （与v-bind结合使用，因为在进行操作的时候需要传入值）

        1. 在节点上直接绑定click事件
        2. 在methods属性中定义函数
        3. methods中使用data中的数据必须使用this访问

        4. this代表vue实例化对象

   e) 添加节点,通过input的value值与data绑定

   v-model与表单元素的value值的双向数据绑定（在表单控件或者组件上创建双向绑定,在节点上直接修改value属性）
            双向数据绑定

           1. 将表单中input的值value和data中值绑定起来

           （data设置该数据的属性值title:"默认值"，input中绑定v-model="title"，添加按钮绑定@click="additem"）

            2. data改变input[value]改变

           data中的title的值改变，input中的value也会发生改变

            3. Input[value]改变data改变

            在input中输入值，点击添加按钮，data中的数据发生改变

    f)  绑定属性（自定义属性）（绑定属性值）V-bind:href，data-id
            1. 简写(：href)
            2. v-bind：的缩写 : （冒号）

    g)  v-if删除了节点,页面审查不到 

            v-show隐藏了节点(使用display:none隐藏了节点),页面能够审查到

 

案例：简式计算机

    
    




    
    
        +
        -
        *
        /