高调的小丑
高调的小丑

Vue.JS学习笔记

简介

Vue.js是目前比较火的轻量级的前端框架之一。是一套构建用户界面的渐进式框架。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

var newVue=new Vue({
    el:'#demo',
    data:{
        name:'curry',
        age:18,
    },
    create:function(){
        console.log("hello,"+this.name);
    },
    methods:{
        showMsg(){
            console.log("hello,"+this.name);
        },
    },
})

Vue包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项。不同的实例选项拥有不同的功能，如：

  1. el表明我们的Vue需要操作哪一个元素下的区域，’#demo’表示操作id为demo的元素下区域。
  2. data表示Vue 实例的数据对象，data 的属性能够响应数据的变化。
  3. created表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法。

指令

v-text

v-text: 用于更新绑定元素中的内容


//两者一样

{{text}}

v-html

v-html: 用于更新绑定元素中的html内容

一般情况下不会再页面使用html插入，以防止xss攻击。

v-show

v-show：根据表达式之真假值，切换元素的display CSS 属性

显示我

v-if、v-else、v-else-if

根据表达式的值的真假条件渲染元素

//根据随机值来进行显示不同的内容


  Sorry




  Not sorry

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-for

v-for是以item in items的形式的特殊语法，常用来绑定数据到数组来渲染一个列表


  
    
    
  1. 
      {{ site.name }}
    
    2.

也可以将第二个参数作为键名

  • 
    {{ key }} : {{ value }}

    •

    第三个参数为索引

  • 
     {{ index }}. {{ key }} : {{ value }}

    •

    v-on

    v-on：绑定事件监听器

    v-bind

    v-bind:动态地绑定一个或多个特性，或一个组件 prop 到表达式。

    
![](imageSrc)


![](imageSrc)

    v-model

    v-model:随表单控件类型不同而不同。只有
    、