精华内容
下载资源
问答
  • 1. 前置知识在学习某一个框架之前,比不可少的就是基础知识,对于Vue.js来说,需要具备的学习条件有:HTML,CSS,JS,Node.js。其中,HTML,CSS,JS作为前端开发必不可少的知识,是必须需要掌握的,如果不具备相应的知识...

    1.  前置知识

    在学习某一个框架之前,比不可少的就是基础知识,对于Vue.js来说,需要具备的学习条件有:HTML,CSS,JS,Node.js。其中,HTML,CSS,JS作为前端开发必不可少的知识,是必须需要掌握的,如果不具备相应的知识,笔者十分不建议继续往下学习。

    而对于Node.js,在一开始的基础学习中,可以先不用考虑,但是在后面使用Vue cli 开发项目的时候,我们便会需要Node.js相关的知识,其中包括有如何安装Node.js环境,如何配置Node.js,如何使用npm命令去搭建Vuecli,如何运行和调试Vue.js项目等。这些相关的知识等到需要的时候我们在一一进行讲解。

    2.  Vue.js介绍

    Vue.js是一套用于构建是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,Vue 的核心库只关注视图层。也就是说,Vue.js本质就是一个前端框架,和之前的Jquery.js类似,但是设计思想是完全不一样的。

    3.  什么是MVVM框架

    MVVM框架本质就是MVC 的改进版。在MVVM中,进一步将View 的状态和行为抽象化,从而让视图 UI 和业务逻辑分开。MVVM模型中的核心思想就是数据模型数据双向绑定,因此在ViewModel之间没有联系,通过ViewModel进行交互,而且ModelViewModel之间的交互是双向的,因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应到View上。

     

    4.  Vue.jsJquery.js的对比

    Jquery使用选择器获取到Dom对象后,可以对其进行赋值,取值,事件绑定的操作,Jquery和原生JS操作的区别是更加方便开发者去获取和操作Dom对象,页面和数据是绑定在一起的。

    Vue.js是通过Vue对象将数据和View分离开,我们对数据的操作不再需要获取到Dom对象,可以直接对数据进行操作,这就是MVVM框架。

     

    5.  下一节内容

    在下一节的内容中,笔者将会和大家介绍如何使用Vue.js编写一个最基本的HelloWorld案例。

     


     

    参考资料:

    Vue.js官网介绍:https://cn.vuejs.org/v2/guide/

    MVVM简介与运用:https://blog.csdn.net/chun_long/article/details/52086565

    Jqueryvue对比:https://www.cnblogs.com/MR-YY/p/6898464.html

     


    展开全文
  • vue.js入门视频教程 2016年12月5日 :本教程介绍Vue.js1.x。 如果您正在寻找Vue 2内容,请参见此处: Vue.js 2.0 Framework的启动和运行 。 2016年7月21日 :文章已更新,以涵盖Vue.js 1.0.x,并添加了有关组件的...

    vue.js入门视频教程

    2016年12月5日 :本教程介绍Vue.js1.x。 如果您正在寻找Vue 2内容,请参见此处: Vue.js 2.0 Framework的启动和运行

    2016年7月21日 :文章已更新,以涵盖Vue.js 1.0.x,并添加了有关组件的部分。

    Vue.js是一个JavaScript库,可帮助您使用MVVM(Model-View-ViewModel)架构模式构建Web应用程序。 乍一看,它似乎与AngularJS非常相似,但是一旦开始使用它,您将很快意识到Vue.js不仅更简单易学,而且更加灵活。

    在此入门教程中,我将教给您Vue.js的基本概念,并全面概述其最重要的功能。

    Vue.js 1.0.x的一些语法更改与Vue.js 0.12.x不兼容。 如果您有使用这些早期版本的经验,则可能已经注意到本教程中的某些更改。 您可以在此处获得所有更改的概述: Vue.js 1.0的新增功能

    将Vue.js添加到您的页面

    尽管您可以从GitHub获取最新版本的Vue.js ,但您可能会发现从CDN加载它更容易:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js">
    </script>

    创建一个视图模型

    在Vue.js中,视图模型是使用Vue类创建的。 如果您想知道什么是视图模型,可以将其视为一个对象,可以很轻松地在视图内显示模型数据(您可以将任何对象文字视为模型,也可以将任何HTML UI元素视为作为一个视图)。

    要查看视图模型是如何工作的,让我们从创建视图开始。 空的<div>现在将执行:

    <div id="my_view">
    </div>

    这是一个对象文字,它将成为我们的模型。 由于它处理JavaScript代码,因此请确保在<script>标签或单独的JS文件中创建它。

    var myModel = {
      name: "Ashley",
      age: 24
    };

    现在我们有了一个视图和一个模型,是时候创建一个将两者绑定在一起的视图模型了( Vue实例):

    var myViewModel = new Vue({
      el: '#my_view',
      data: myModel
    });

    如您所见, el属性指向视图(您可以在此处使用任何CSS选择器),而data属性指向模型。 现在可以使用我们的视图模型了。

    要在视图内显示模型的数据,应使用胡须样式的绑定。 例如,要显示模型的age属性,可以在视图内添加字符串{{ age }} 以下代码段同时使用了模型的两个属性:

    <div id="my_view">
      {{ name }} is {{ age }} years old.
      <!-- Evaluated to "Ashley is 24 years old" -->
    </div>

    您对模型所做的任何更改都将立即在视图中可见。

    创建双向绑定

    我们在前面的示例中使用的胡须样式绑定是单向绑定。 这意味着它只能显示模型的数据,而不能对其进行修改。 如果要允许视图编辑模型,则应使用v-model指令创建双向绑定。

    让我们更改视图,使其包含一个input元素,其v-model指向name属性:

    <div id="my_view">
      <label for="name">Enter name:</label>
      <input type="text" v-model="name" id="name" name="name" />
      <p>{{ name }} is {{ age }} years old.</p>
    </div>

    此时,如果您在输入字段中编辑值,则模型将立即更改。

    请参阅CodePen上的SitePoint( @SitePoint )提供的Pen XbYZBJ

    使用过滤器

    免费学习PHP!

    全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

    原价$ 11.95 您的完全免费

    过滤器是可以在指令或胡须样式绑定中使用的函数。 过滤器前总是带有管道符号( | )。 例如,如果要以大写形式显示name属性,则您的胡须样式绑定应如下所示:

    {{ name | uppercase }}

    同样在这种情况下,您可以查看一个有关过滤器演示

    请参阅CodePen上的SitePoint( @SitePoint )提供的Pen MwXQBM

    过滤器的lowercasecapitalize可以类似的方式使用。

    在下一节中,我们将详细讨论过滤器。

    渲染阵列

    如果您的模型有一个数组,则可以通过在列表的<li>元素中添加v-for指令来显示该数组的内容。 为了证明这一点,让我们向模型添加一个数组:

    var myModel = {
      name: "Ashley",
      age: 24,
      friends: [
        { name: "Bob", age: 21 },
        { name: "Jane", age: 20 },
        { name: "Anna", age: 29 }
      ]
    };

    下面的代码向您展示如何显示friends数组中每个对象的name属性:

    <div id="my_view">
      <ul>
        <li v-for="friend in friends"> {{ friend.name }} </li>
      </ul>
    </div>

    要更改列出元素的顺序,请使用v-for指令内的orderBy过滤器。 例如,如果要按age排序元素,则代码应如下所示:

    <div id="my_view">
      <ul>
        <li v-for="friend in friends | orderBy 'age'"> {{ friend.name }}</li>
      </ul>
    </div>

    您也可以有条件地渲染项目。 要实现此任务,请使用filterBy过滤器。 例如,以下示例显示如何仅渲染name字段中包含字符“ a”的那些项目:

    <div id="my_view">
      <ul>
        <li v-for="friend in friends | filterBy 'a' in 'name'"> {{ friend.name }} </li>
      </ul>
    </div>

    第三个演示使用双向数据绑定和filterBy过滤器来模拟搜索:

    见笔使用filterBy到过滤项的实施例由SitePoint( @SitePoint上) CodePen

    处理事件

    在Vue.js中,如果需要处理与视图关联的事件,则应在视图模型的methods属性内添加事件处理程序。 在所有Vue.js事件处理程序内部,您可以使用this来访问数据模型中的项目。

    以下视图模型包含一个单击处理程序:

    var myViewModel = new Vue({
      el: '#my_view',
      data: myModel,
    
      // A click handler inside methods
      methods: {
        myClickHandler: function(e) {
          alert("Hello " + this.name);
        }
      }
    });

    要将视图模型中定义的事件处理程序与视图中的一个或多个UI元素相关联,应使用v-on指令。 例如,下面的视图有一个<button> ,它使用v-on指令来调用myClickHandler

    <div id="my_view">
      Name: <input type="text" v-model="name">
      <button v-on:click="myClickHandler">Say Hello</button>
    </div>

    将这些代码段放在一起,就得到了点击处理程序的演示

    请参见CodePen上的SitePoint@SitePoint处理事件的Pen 示例

    创建组件

    Vue.js允许您创建可在视图中使用的自定义HTML元素。 通过使用这样的元素,您不仅可以使代码更简洁,而且更具可读性。

    要定义和注册自定义HTML元素,必须使用Vue类的component方法创建Vue组件。 您可以使用组件的template属性指定自定义元素的内容。

    这是一个代码段,定义并注册了一个简单的自定义HTML元素,称为<sitepoint>

    Vue.component('sitepoint', {
      template: '<a href="https://www.sitepoint.com">Sitepoint</span>'
    });

    现在,可以像其他任何标准HTML元素一样在视图中使用<sitepoint>元素。

    <div id="my_view">
      <sitepoint></sitepoint>
    </div>

    标准HTML元素通常具有与之关联的属性,这些属性使您可以控制它们的外观和行为。 您使用Vue.js创建的自定义元素也可以具有此类属性。 要指定元素可以具有的属性,必须在创建关联的组件时使用props属性。

    这是向<sitepoint>元素添加一个称为channel的道具的方法:

    Vue.component('sitepoint', {
      props: ['channel'],
      template: '<a href="https://www.sitepoint.com/{{ channel | lowercase }}">{{ channel }} @Sitepoint</span>',
    });

    如您在上面的代码中所见,胡须样式的绑定可用于将prop的值嵌入template

    现在,您可以自由使用<sitepoint>标记内的channel属性。 例如,以下是使用它链接到Sitepoint的两个不同渠道的方法:

    <div id="my_view">
      <sitepoint channel="JavaScript"></sitepoint>
      <sitepoint channel="Web"></sitepoint>
    </div>

    随意修改以下演示中的代码,以尝试其他模板和道具。

    请参见CodePen带有 SitePoint( @SitePoint )的道具的钢笔示例

    结论

    在有关Vue.js的入门教程中,我们研究了如何使用单向和双向数据绑定,指令,过滤器和事件。 我们还学习了如何使用Vue.js组件创建自己HTML元素。

    所涉及的主题应该足以开始使用此简单框架创建交互式Web界面。 如果您正在寻找更多功能,例如对Ajax的支持或路由操作,那么可以将越来越多的Vue.js插件添加到您的项目中。

    要了解有关Vue.js的更多信息,我建议您阅读Vue.js API参考并浏览网站上的指南

    翻译自: https://www.sitepoint.com/getting-started-with-vue-js/

    vue.js入门视频教程

    展开全文
  • vue.js中文教程

    2018-01-29 16:33:51
    Vue.js(读音 /vju?/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它...
  • vue.js 组件cssNote: this tutorial uses Vue.js ... 注意:本教程使用Vue.js单个文件组件 The simplest option to add CSS to a Vue.js component is to use the style tag, just like in HTML: 将CSS添加到Vue.js...

    vue.js 组件css

    Note: this tutorial uses Vue.js Single File Components

    注意:本教程使用Vue.js单个文件组件

    The simplest option to add CSS to a Vue.js component is to use the style tag, just like in HTML:

    将CSS添加到Vue.js组件的最简单选择是使用style标签,就像在HTML中一样:

    <template>
      <p style="text-decoration: underline">Hi!</p>
    </template>
    
    <script>
    export default {
      data() {
        return {
          decoration: 'underline'
        }
      }
    }
    </script>

    This is as much static as you can get. What if you want underline to be defined in the component data? Here’s how you can do it:

    这是尽可能多的静态方法。 如果要在组件数据中定义underline怎么办? 方法如下:

    <template>
      <p :style="{'text-decoration': decoration}">Hi!</p>
    </template>
    
    <script>
    export default {
      data() {
        return {
          decoration: 'underline'
        }
      }
    }
    </script>

    :style is a shorthand for v-bind:style. I’ll use this shorthand throughout this tutorial.

    :stylev-bind:style的简写。 在本教程中,我将使用此速记。

    Notice how we had to wrap text-decoration in quotes. This is because of the dash, which is not part of a valid JavaScript identifier.

    注意我们如何将text-decoration用引号引起来。 这是因为破折号不是有效JavaScript标识符的一部分。

    You can avoid the quote by using a special camelCase syntax that Vue.js enables, and rewriting it to textDecoration:

    您可以通过使用Vue.js启用的特殊camelCase语法并将其重写为textDecoration来避免引用:

    <template>
      <p :style="{textDecoration: decoration}">Hi!</p>
    </template>

    Instead of binding an object to style, you can reference a computed property:

    除了将对象绑定到style ,您还可以引用计算属性:

    <template>
      <p :style="styling">Hi!</p>
    </template>
    
    <script>
    export default {
      data() {
        return {
          textDecoration: 'underline',
          textWeight: 'bold'
        }
      },
      computed: {
        styling: function() {
          return {
            textDecoration: this.textDecoration,
            textWeight: this.textWeight
          }
        }
      }
    }
    </script>

    Vue components generate plain HTML, so you can choose to add a class to each element, and add a corresponding CSS selector with properties that style it:

    Vue组件生成纯HTML,因此您可以选择向每个元素添加一个类,并添加具有样式属性的相应CSS选择器:

    <template>
      <p class="underline">Hi!</p>
    </template>
    
    <style>
    .underline { text-decoration: underline; }
    </style>

    You can use SCSS like this:

    您可以像这样使用SCSS:

    <template>
      <p class="underline">Hi!</p>
    </template>
    
    <style lang="scss">
    body {
      .underline { text-decoration: underline; }
    }
    </style>

    You can hardcode the class like in the above example, or you can bind the class to a component property, to make it dynamic, and only apply to that class if the data property is true:

    您可以像上面的示例中那样对类进行硬编码,也可以将类绑定到组件属性以使其具有动态性,并且仅在data属性为true时才应用于该类:

    <template>
      <p :class="{underline: isUnderlined}">Hi!</p>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isUnderlined: true
        }
      }
    }
    </script>
    
    <style>
    .underline { text-decoration: underline; }
    </style>

    Instead of binding an object to class, like we did with <p :class="{text: isText}">Hi!</p>, you can directly bind a string, and that will reference a data property:

    无需像在<p :class="{text: isText}">Hi!</p>那样将对象绑定到类,您可以直接绑定一个字符串,该字符串将引用一个data属性:

    <template>
      <p :class="paragraphClass">Hi!</p>
    </template>
    
    <script>
    export default {
      data() {
        return {
          paragraphClass: 'underline'
        }
      }
    }
    </script>
    
    <style>
    .underline { text-decoration: underline; }
    </style>

    You can assign multiple classes either adding two classes to paragraphClass in this case or by using an array:

    您可以分配多个类,在这种情况下,可以在paragraphClass类中添加两个类,也可以使用数组:

    <template>
      <p :class="[decoration, weight]">Hi!</p>
    </template>
    
    <script>
    export default {
      data() {
        return {
          decoration: 'underline',
          weight: 'weight',
        }
      }
    }
    </script>
    
    <style>
    .underline { text-decoration: underline; }
    .weight { font-weight: bold; }
    </style>

    The same can be done using an object inlined in the class binding:

    使用类绑定中内联的对象可以完成相同的操作:

    <template>
      <p :class="{underline: isUnderlined, weight: isBold}">Hi!</p>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isUnderlined: true,
          isBold: true
        }
      }
    }
    </script>
    
    <style>
    .underline { text-decoration: underline; }
    .weight { font-weight: bold; }
    </style>

    And you can combine the two statements:

    您可以结合以下两个语句:

    <template>
      <p :class="[decoration, {weight: isBold}]">Hi!</p>
    </template>
    
    <script>
    export default {
      data() {
        return {
          decoration: 'underline',
          isBold: true
        }
      }
    }
    </script>
    
    <style>
    .underline { text-decoration: underline; }
    .weight { font-weight: bold; }
    </style>

    You can also use a computed property that returns an object, which works best when you have many CSS classes to add to the same element:

    您还可以使用返回对象的计算属性,当您将多个CSS类添加到同一元素时,该属性最有效:

    <template>
      <p :class="paragraphClasses">Hi!</p>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isUnderlined: true,
          isBold: true
        }
      },
      computed: {
        paragraphClasses: function() {
          return {
            underlined: this.isUnderlined,
            bold: this.isBold
          }
        }
      }
    }
    </script>
    
    <style>
    .underlined { text-decoration: underline; }
    .bold { font-weight: bold; }
    </style>

    Notice that in the computed property you need to reference the component data using this.[propertyName], while in the template data properties are conveniently put as first-level properties.

    请注意,在计算属性中,您需要使用this.[propertyName]引用组件数据this.[propertyName]而在模板数据中,属性方便地放置为第一级属性。

    Any CSS that’s not hardcoded like in the first example is going to be processed by Vue, and Vue does the nice job of automatically prefixing the CSS for us, so we can write clean CSS while still targeting older browsers (which still means browsers that Vue supports, so IE9+)

    Vue将处理所有未像第一个示例中那样进行硬编码CSS,Vue会为我们自动为CSS加上前缀,因此我们可以编写干净CSS,同时仍以较旧的浏览器为目标(这仍然意味着Vue支持,因此IE9 +)

    翻译自: https://flaviocopes.com/vue-css/

    vue.js 组件css

    展开全文
  • Vue.js入学教程

    2020-07-04 13:07:54
    Vue.js是什么Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。Vue.js(类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是...

    Vue.js是什么
    Vue.js 是用于构建交互式的 Web 界面的库。
    Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。
    Vue.js(类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,
    vue采用自底向上增量开发的设计。vue的核心只关注视图层,它不仅易于上手,还便于与
    第三方库或即有项目整合。另一方面,当与单文件组件和vue生态系统支持的库结合使用时,
    vue也完全能够为复杂的但也应用程序提供驱动。

    Vue.js 特点

    • 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
    • 数据驱动: 自动追踪依赖的模板表达式和计算属性。
    • 组件化: 用解耦、可复用的组件来构造界面。
    • 轻量: ~24kb min+gzip,无依赖。
    • 快速: 精确有效的异步批量 DOM 更新。
    • 模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。

    如果你喜欢下面这些,那你一定会喜欢 Vue.js:

    • 可扩展的数据绑定机制
    • 原生对象即模型
    • 简洁明了的 API
    • 组件化 UI 构建
    • 多个轻量库搭配使用

    Vue.js 安装

    独立版本

    直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

    Vue.js 官网下载地址:http://vuejs.org/guide/installation.html

    我们可以在官网上直接下载生产版本应用在我们项目中。

    NPM 安装

    在用 Vue.js 构建大型应用时推荐使用 NPM 安装:

    # 最新稳定版本
    $ npm install vue
    # 最新稳定 CSP 兼容版本
    $ npm install vue@csp
    # 开发版本(直接从 GitHub 安装)
    $ npm install vuejs/vue#dev

    双向数据绑定

    接下来我们创建一个 view 层 HTML 文件:vueapp.htm,以及 model 层文件:vueapp.js,然后通过 vue.js(使用v-model这个指令)完成中间的底层逻辑,实现绑定的效果。改变其中的任何一层,另外一层都会改变。

    1179237-20170708143146800-1616677041.png

    vueapp.htm 文件代码:

    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

    vueapp.js 文件代码:

    new Vue({
      el: '#app',
      data: {
        message: '菜鸟教程!'
      }
    })

    以上实例中 {{message}} 会根据输入框 input 的改变而改变,如果你不想让其变化可以修改为:

    {{* message }}

    同时还支持一些简单的表达式:

    <!-- 字符串连接 -->
    {{ message + '官网地址:www.runoob.com' }}
    <!-- 字符串反转 -->
    {{ message.split('').reverse().join('') }}


    列表输出

    列表输出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 这个指令就能完成:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <ul>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ul>
    </div>
    <script>
    	new Vue({
      el: '#app',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue.js' },
          { text: 'Build Something Awesome' }
        ]
      }
    })
    </script>
    </body>
    </html>


    条件判断

    在字符串模板中,如 Handlebars,我们得像这样写一个条件块:

    <!-- Handlebars 模板 -->
    {{#if ok}}
      <h1>Yes</h1>
    {{/if}}

    在 Vue.js,我们使用 v-if 指令实现同样的功能:

    <h1 v-if="ok">Yes</h1>

    也可以用 v-else 添加一个 "else" 块:

    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>


    过滤器

    与Linux中的管道类似,vue.js也使用的是|:

    {{message | uppercase}}

    这样就能输出message的大写了,过滤器也能串联在一起使用:

    {{message | reverse | uppercase}}

    这里reverse并不是内建的过滤器,我们可以用Vue.filter自定义:

    Vue.filter('reverse', function (value) {
        return value.split('').reverse().join('')
    })

     

    补充
    bulid--webpack的整个开发框架
    config--webpack构建开发、测试、发布环境配置
    dist--prod 发布之后的文件
    src--当前所有项目文件都在其中
    --assets-- 当前项目所有静态文件(img字体less等)
    --use-- 当前项目路由/use/以及其子路由页面的展示
    --components--当前项目所有组件(基础组件、form组件、功能组件等)
    --vuex-- 当前项目 所有组件 通信相关

    Code
    组件实现的代码(其中包括了html、less、js)

     

    转载自Vue.js入门教程

    展开全文
  • 来源 | https://xueyuanjun.com/post/21914在《【Vue.js 入门到实战教程】01-Vue.js 数据绑定的基本实现和代码分析》给大家简单介绍了 Vue...
  • Vue.js技术会议 先决条件(可选) 安装Chrome 安装Visual Studio Code 扩展 安装Visual Studio Code 扩展 01-HelloWorld 使用了的示例。 开始 npx http-server 高跟鞋 使用Vue CLI生成的“ full blown”应用程序...
  • Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑,你应该使用计算属性。这篇文章我们将一起学习vue.js的计算属性。什么是计算属性,为什么要用这东西呢?...
  • Vue教程 vue.js安装 ...在vue.js官网下载vue.min.js,使用script标签src属性引入vue.min.js文件。 使用CDN方法 https : //cdn.staticfile.org/vue/2.2.2/vue.min.js https : //unpkg.com/vue/dist/vue.js ...
  • Vue.js 入门教程(1) 每天学习一点新知识,每天都有进步。本文章主要是自己学习进行监督。 文章目录Vue.js 入门教程(1)一、Vue.js介绍二、 特点三、架构MVVM 一、Vue.js介绍 Vue (读音 /vjuː/,类似于 view)...
  • Vue.js基础教程

    2019-02-22 22:59:37
    文章链接:Vue.js基础教程 开发工具准备: 根据个人喜欢选择IDE,我使用的是WebStorm,推荐使用Atom和VSCode; 安装git base和node.js; 安装vue-cli,命令npm i -g @vue/cli; 新建vue-cli项目: 方法一:通过...
  • Vue.js安装教程

    2019-02-21 17:06:18
    Vue安装 一.vue下载地址 直接下载并使用script...vue.js下载官网地址:https://vuejs.org/v2/guide/installation.html 我们可以下载我们开发中所需要的版本,共有一下两个版本 或者使用本站的静态资源CDN库: ...
  • 来源 |https://xueyuanjun.com/post/21917我们继续介绍 Vue.js 框架的基本功能。基本使用Vue.js 中,可以通过 v-for 指令轻松实现列...
  • 来源 |https://xueyuanjun.com/post/21923我们在《【Vue.js 入门到实战教程】01-Vue.js 数据绑定的基本实现和代码分析》中演示数据绑定的时候...
  • Vue.js 教程

    2021-01-19 21:26:40
    Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。...
  • Vue.js 概念 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件...
  • Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为。你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令。定义对象需要...
  • Vue.js入门教程(适合初学者)

    千次阅读 2020-03-01 14:07:28
    Vue.js入门教程 Vue官网 https://vuejs.org/index.html Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架。也可以说Vue.js 是一个用来构建网页界面的 JavaScript 库。 Vue的常用使用方式有两...
  • vue.js教程.rar

    2021-03-30 15:50:08
    vue.js入门12节教程代码,层层递进,适合html,css,javaScripT基础的小白前端人员使用,入门vue的尽快下载。
  • Vue.js与Webpack安装教程 1 vue.js研究 1 1.1 vue.js介绍 1 1、vue.js是什么? 1 2、Vue.js与ECMAScript 1 3、Vue.js使用 2 4、vue.js有哪些功能? 2 1.2 webpack入门 3 1.2.1 webpack介绍 3 1.2.2 安装webpack 4
  • Vue.js 入门教程—Npm安装 文章目录Vue.js 入门教程—Npm安装一、NPM是什么?二、使用步骤1. 下载node.js2. 安装node.js3. 查看版本总结 一、NPM是什么? NPM是一个node.js下面的一个依赖包安装工具,可以用来安装...
  • Vue.js学习教程

    2018-06-26 15:41:20
    Vue入门基础教程使用Vue入门基础教程使用Vue入门基础教程使用Vue入门基础教程使用Vue入门基础教程使用Vue入门基础教程使用
  • vue.js下载教程

    2020-08-15 12:06:59
    Node.js是一个基于Chrome引擎的JavaScript运行环境,使用了事件驱动非阻塞式I/O模型。nmp(Node Package Manager)是一个包管理和分发工具,运行在node环境下。npm已经内置在Node.js中,所以直接安装Node.js就可以...
  • 使用Auth0进行身份验证的Vue.js演示应用程序您可以按照Storyblok上的完整教程进行操作,也可以仅将其用作应用程序的样板。 该存储库的教程...可以在Storyblok上找到。 它指导您完成以下步骤:简介环境设置准备Auth0 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,898
精华内容 759
关键字:

vue.js使用教程

vue 订阅