vue.js的一些知识点

时间：2022-08-26 22:31:10

1、

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="vue.js"></script>

</head>

<body>

    <div id="app">

        <span>{{count}}</span>

        <button @click="inc">+</button>

    </div>

    <script>

        var app = new Vue({

          // 1.

          // data () {

          //   return {count: 0}

          // },

          // 2.

          // data: {

          //   count: 0

          // },

          // 3.

          data: function() {

            return {

              count:

            }

          },

          methods: {

            inc () {this.count++}

          }

        })

        app.$mount('#app')

    </script>

</body>

</html>

上述的data有三种写法，都能够运行，那有什么区别呢？

首先，1是3的语法糖，是新的ES6语法，和3一摸一样。

1和2的区别：引用官网，简而言之，在app = new Vue对象时，没什么区别，因为你app对象不会被复用。但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。

使用组件时，大多数可以传入到 Vue 构造器中的选项可以在注册组件时使用，有一个例外： data 必须是函数。 实际上，如果你使用的不是函数，那么 Vue 会在控制台发出警告，告诉你在组件中 data 必须是一个函数。

下面的例子会让所有的组件都同时发生变化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="vue.js"></script>

</head>

<body>

<div id="example-2">

  <simple-counter></simple-counter>

  <simple-counter></simple-counter>

  <simple-counter></simple-counter>

</div>

<script>

var data = { counter:  }

Vue.component('simple-counter', {

  template: '<button v-on:click="counter += 1">{{ counter }}</button>',

  // data 是一个函数，因此 Vue 不会警告，

  // 但是我们为每一个组件返回了同一个对象引用

  data: function () {

    return data

  }

})

new Vue({

  el: '#example-2'

})

</script>

</body>

</html>

由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！我们可以通过为每个组件返回新的 data 对象来解决这个问题：

data: function () {

  return {

    counter:

  }

}

https://cn.vuejs.org/v2/guide/components.html#data-必须是函数

https://segmentfault.com/q/1010000007910818?_ea=1490198

2、

渐进式框架、采用自底向上增量开发（可以查看前面的文章）

核心思想：响应的数据绑定和组合的视图组件

在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理，你写的代码只需要关注基本逻辑。v-on可以实现。

注意每个 Vue 实例都会代理其 data 对象里所有的属性，只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

3、

不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据（v-if）。

需要注意的是：v-if不能绑定在所挂载的元素上，比如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue组件</title>

</head>

<body>

    <div id="app" title="text" v-if="type">

        {{message}} {{text}}

     </div>

    <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

     <script>

        var mes = {

                message:"hello"+ new Date(),

                text:"world"

            }

        var app = new Vue({

            el:"#app",

            data:mes,

            type:true

        })

     </script>

</body>

</html>

这样会报错：

vue.js的一些知识点

vue.js的一些知识点的更多相关文章

  1. Vue&period;js中前端知识点总结笔记

    1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...

  2. vue&period;js 知识点（四）

    看完了vue.js的官方文档,大概对这些知识有了那么一点的了解了,但是很多具体的运用还不太清楚,现在就总结一下,关于其中的一些知识点的运用: v-bind:  动态绑定指令,默认情况下,是给html ...

  3. vue&period;js 一些知识点

    vue.js 也是试图层的运用方法,跟react的方法类似,不过也有许多的不同地方: 1.vue.js 对于数据也是用{{ }} 进行数据更新: 2.vue.js 使用 v-html 指令用于输出 h ...

  4. 【前端芝士树】Vue&period;js面试题整理 &sol; 知识点梳理

    [前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...

  5. Vue&period;js知识点总结

    1. Vue.js简介 1.1 Vue.js简介 1.2 创建一个vue实例 2. Vue.js基础 2.1 模板语法 2.2 环境搭建 2.3 生命周期钩子

  6. Vue&period;js——60分钟组件快速入门（上篇）

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  7. Vue&period;js&mdash&semi;&mdash&semi;60分钟组件快速入门（下篇）

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  8. 利用Vue&period;js实现拼图游戏

    之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...

  9. 前端开发之走进Vue&period;js

    Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...

随机推荐

  1. &lt&semi;web Font的使用&gt&semi;

    使用font-face将字体引入web中 先将字体文件复制到项目的font文件夹中,CSS样式如下: @font-face { font-family: 'iconfont'; /*字体名称*/ sr ...

  2. C&num;异步调用的方法

    最经公司工作需要调用一个外部的webservice,同时要将传出的数据进行保存,以自己以前的习惯,就打算逐步操作,失败啊,完全没考虑过用户体验效果,在同事指点下,意识到使用异步调用的好处,随便将自己找 ...

  3. IE中的文档兼容性

    文档兼容性可定义 Internet Explorer 呈现网页的方式, 具体可以参考 https://msdn.microsoft.com/zh-cn/library/cc288325(v=vs.85 ...

  4. list 、set 、map 粗浅性能对比分析

    list .set .map 粗浅性能对比分析   不知道有多少同学和我一样,工作五年了还没有仔细看过list.set的源码,一直停留在老师教导的:"LinkedList插入性能比Array ...

  5. hdu1754&lpar;splay&rpar;

    给n个数,有两种操作    Q a b   询问区间[a,b]的最大值,  U a b 将第a个数的值改成b splay树的中序遍历是我们所维护的序列.如果要询问区间[a,b]的最大值,那么只要将第a ...

  6. Recover Polygon &lpar;easy&rpar;

    Recover Polygon (easy) The zombies are gathering in their secret lair! Heidi will strike hard to des ...

  7. cgLib生成动态代理

    package com.stono.cglib; import java.lang.reflect.Method; import net.sf.cglib.proxy.Enhancer; import ...

  8. hibernate 使用枚举字段的最佳实践

    枚举类虽然很简单,但是却往往是系统中业务逻辑最集中最复杂的地方.本文将会分享我们项目中基于hibernate的枚举类使用规范,包含数据库中枚举列数据类型.注释.枚举列与枚举类的映射等. 一.枚举类定义 ...

  9. CSS 组合选择器

    CSS 组合选择器 注:使用逗号分隔,同时应用. 多个id选择器拼接到一起 含有:i1 i2 i3的标签同时应用css样式. <html> <head> <!-- sty ...

  10. Beta冲刺 （6&sol;7）

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1:(组长)柯奇豪 过去两天完成了哪些任务 部分代码的整合 编辑及标注的提交操 ...

相关文章