Vue.js简单入门

一、vue.js是什么

Vue 是一套用于构建用户界面的渐进式框架。
Vue 被设计为可以自底向上逐层应用。
Vue 完全能够为复杂的单页应用提供驱动。
Vue 的核心库只关注视图层。
Vue的核心是采用简洁的模板语法来声明式地将数据渲染进 DOM 系统。

二、基本使用

每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的,所有的 Vue 组件都是 Vue 实例。
实例的属性与方法都有前缀 $,以便与用户定义的属性区分开来。

创建vue.js的实例过程:

当创建一个 Vue 实例时,可以传入一个选项对象。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。

var vm = new Vue({
  // 选项
})

示例代码:




    
    vue示例 


    
{{message}}

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
注意:只有当实例被创建时 data 中存在的属性才是响应式的。

三、指令

带有前缀 v-被称为指令。以表示是 Vue 提供的特殊特性。它们会在渲染 DOM 上应用特殊的响应式行为。
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式。

v-on 指令绑定事件监听器,缩写为@
v-for 指令可以绑定数组的数据来渲染一个项目列表
v-if指令是条件判断
v-model 指令实现双向数据绑定。
v-bind 指令可以用于响应式地更新 HTML 属性,缩写为:

示例1:v-if


显示

//js var myApp3 = new Vue({ el: "#myApp3", data: { show: true } })

示例2:v-for


  1. {{item.text}}
//js var myApp4=new Vue({ el:"#myApp4", data:{ items:[ {text:"测试1"}, {text:"测试2"}, {text:"测试3"} ] } })

示例3:v-on


{{message}}

//js var myApp5=new Vue({ el:"#myApp5", data:{ message:"hello world" }, methods:{ reverseBtn:function () { this.message=this.message.split('').reverse().join('') } } })

示例4:v-modal


{{message}}

//js var myApp6=new Vue({ el:"#myApp6", data:{ message:"hello world" } })

示例5:v-bind 缩写


...

...

示例6:v-on 缩写


...

...

(一)参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。

示例:href属性
...
在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

(二)修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

示例:

...

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

转载于:https://www.cnblogs.com/YYW303/p/9484168.html

你可能感兴趣的:(Vue.js简单入门)