vue基础知识点

前提:部分内容引用于https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

实例1:

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

var app =new Vue({

      el:'#app',//绑定组件

      data: {//数据

        message:'Hello Vue!'

      }

})

知识点:通过new Vue创建实例,el绑定组件,data进行数据动态赋值。(即响应式)

el就是值作用范围,只能指向一个对象(可以是id选择器或者class选择器)


指令带有前缀v-,以表示它们是 Vue 提供的特殊特性。

常用指令例子

v-on 指令添加一个事件监听器↓

v-on:click 点击事件绑定,可简写成@click  例:v-on:click(fun)    这样就绑定了'fun'的点击事件了。

v-model(双向绑定,即其中一方改变值,另一方也随之改变)

v-show  绑定的值为true则显示,为false则隐藏

v-hide  绑定的值为true则隐藏,为false则显示

v-if 绑定的值为true则显示,为false则隐藏

(v-if和v-show的用法区别:https://www.jianshu.com/p/4128c399d32c)

v-for //动态渲染格式为 (自定义数据名,下标) in 数据/集合 {{这些写的是自定义数据名}}

         例:<li v-for="value in arr">{{value}}</li>

v-bind(绑定元素)其中一种写法

2018.12.4----------------------

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 实例生命周期钩子 每个 Vue 实例...
    Timmy小石匠阅读 1,484评论 0赞 11
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,867评论 0赞 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,225评论 0赞 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,419评论 4赞 129
  • 2016-10-16 1:48 星期日 天气晴 终于又到了温差骤变,难以穿衣的尴尬季节了,可能早上还捂着厚厚...
    善小妞阅读 308评论 1赞 4

友情链接更多精彩内容