Vue.js 学习过程一 起步

版权声明:Callback_heaven©版权所有 https://blog.csdn.net/weixin_41564885/article/details/80336927

什么是Vue.js

    用于构建用户界面的渐进式框架,可以自底向上逐层应用

最基础开始:

声明式渲染

    Vue.js的核心是一个允许采用简洁的末班语法来声明式的将数据渲染进DOM系统

案例:

    html:

    <div id="app">{{message}}</div>

    js:

    var app = new Vue({

        el:'#app',

        data:{

               message:'hello vue'

        }

    })

通过声明将数据渲染到HTML上,页面中会显示hello vue,并且他们是响应式

    即如果message发生改变,会自动渲染到HTML上

也可以用来绑定元素特性:

案例:

    HTML:

       <div id="app">

            <span v-bind:title="message">

                鼠标悬停查看信息

            </span>    

       </div>

    JS:

        var app = new Vue({

            el:'#app',

            data:{

                message:"页面加载于" + new Date().toLoacleString()

             }

        })

将span的title属性绑定为message

v-bind:指令,指令带有前缀v-,以表示他们是特殊的特性

条件与循环

    控制切换一个元素是否显示:

    HTML:

        <div id="app">

            <p v-if="seen">这段文字目前是显示的</p>

        </div>

    JS:

        var app = new Vue({

            el:'#app',

            data:{

                seen:true

            }

        })

    不仅可以吧数据绑定到DOM文本或者特性上,还可以绑定到DOM结构

    此处的文字是显示的,当seen为false时,p自动隐藏

v-for

v-for指令可以绑定数组的数据用来渲染项目列表

    HTML:

        <div id="app">

            <ol>

                <li v-for="todo in todos">{{todo}}</li>

            </ol>

        </div>

    JS:

        var app = new Vue({

            el:'#app',

            data:{

                todos:[

                "第一条数据",

                "第二条数据",

                "第三条数据"

                ]

            }  

         })

    v-for指令会自动把todos中的每一条数据渲染到HTML中

    输入app.todos.push("第四条数据")会自动将数据插入

处理用户输入

    为了实现交互,可以使用v-on指令添加事件监听

案例:

    HTML:

        <div id="app">

            <p>{{message}}</p>

            <button v-on:click="reverseMessage">逆转消息</button>

        </div>

    JS:   

        var app = new Vue({

            el:"#app",

            data:{

                    message:"Hello Vue.js"

            },

            methods:{

                reverseMessage:function(){

                this.message = this.message.split("").reverse().join(" ")

                }

            }        

})

    在reverseMessage中,更新了应用的状态,但是没有使用DOM,所有的DOM操

    作都由Vue来进行处理。

v-model

实现表单输入和应用状态之间的双向绑定

案例:

    HTML:

        <div id="app">

            <p>{{message}}</p>

            <input v-model="message">

        </div>

    JS:

        var app = new Vue({

            el:"#app",

            data:{

                message:"Hello Vue"

            }

        })

当输入框输入数据的时候,p中显示的数据随之变

组件化应用构建

    组件系统是Vue的重要概念,允许我们使用小型,独立和通常可服用的组件构建大

型应用,可以将任何类型的应用界面抽象为一课组件树

    在Vue总,一个组件的本质是拥有预定义选项的Vue实例

在Vue中注册组件:

    Vue.component("todo-item",{

        template: "<li>这是一个待办项"</li>

    })

可以用它构建另一个组件模板:

    <ol>

        <todo-item></todo-item>

    </ol>

如果这样,每个待办项都会显示相同文本,修改组件定义,使它能够接受一个prop

    Vue.component("todo-item",{

        props:["todo"],

        template: "<li>这是一个待办项"</li>

    })

现在,可以使用v-bind指令将待办项传到循环输出的每个组件中:


HTML:

<div id="app">

    <ol>

   <todo-item

    v-for="item in groceryList"

    v-bind:todo="item"

    v-bind:key="item.id"

    >

   </todo-item>

     </ol>

</div>

JS:

    Vue.component("todo-item",{

        props:["todo"],

        template:'<li>{{todo.text}}</li>'

    })

    var app = new Vue({

        el:"#app",

        data:{

            groceryList:[

                {id:0,text:'蔬菜'},

                {id:1,text:'奶酪'},

                {id:2,text:"吃啥都行"}

            ]

        }

    })

这个例子是刻意设计的,设法将应用分割为两个小的单元,子单元通过props解构与

父单元进行了良好的降低耦合,现在刻意进一步改进<todo-item>组件,提供更为复

杂的逻辑和模板,而不会影响到父单元

阅读更多

没有更多推荐了,返回首页