vue.js学习心得

原创

已于 2023-12-20 22:37:08 修改 · 677 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2023-12-20 22:31:23 首次发布

本文概述了Vue.js的基础知识，包括其渐进式框架特性、核心关注视图层、组件开发、事件绑定、VueRouter和Vuex的运用，以及过滤器和组件导航的示例。作者分享了通过组件化和团队协作提升开发效率的经验。

前置知识

Vue.js是一个构建用户界面的渐进式框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。核心职关注视图层，易于与其它库或已有项目整合。另一方面,当与现代工具链和各种支持库结合使用时，Vue 也完全能够为复杂的页用提供驱动。Vue.js的核心只关注视图层，易于与其它库或已有项目整合。另-面,当与现代工具链和各种支持库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

第一个vue.js实例

在vue.js项目中，每个vue.js应用都是通过vue构造函数创建新的vue实例开始的。在创建vue实例时，必不可少的一个选项就是el。el表示唯一根标，用于指定一个页面中已存在的DOM元素来挂载vue实例。签可以使用v-on来绑定点击事件。具体用法为v-on:click=”functionName”,中functionName是在Vue实例的methods定义的方法名。这个方法会在按钮被陆时触发，并且this指拘Vue实例。你也可以使用简写形式@click=" functionName",与v-on:click完全相同的。下面举个例子：


    <div id="app">
        <p>苹果电脑：价格--{
  
  {price}}</p>
        <p>苹果电脑：颜色--{
  
  {color}}</p>>
        <button @click="doChange">点击按钮把电脑价格改为10000</button>
    </div>
    <script>
        //2、创建一个vue实例
        var vm=new Vue({
            //绑定根标签，锁定作用域
            el:"#app",
                data(){
                    return{
                    price:5000,
                    color:"黑色",