Vue 的入门代码

目录

Vue是什么?

Vue特点

Vue代码

创建第一个Vue应用

双向数据绑定

目前v-model可使用元素有:

v-for

v-if(v-else)

v-show

Vue变异方法

总结


Vue是什么?

Vue是一套用于构建用户界面渐进式javaScript框架。

Vue是简单的应用:只需一个轻量小巧的核心库。并可以引入格式各样的Vue插件适应复杂应用。

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

Vue特点

1.采用组件化模式,提高代码复用率、且让代码更好维护

2.声明式编码,让编码人员无需直接操作DOM,提高开发效率。

3.使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。


Vue代码

创建第一个Vue应用

{{msg}}

双向数据绑定

既然是双向绑定,一定是在视图中可以修改数据,数据可以改视图。

目前v-model可使用元素有:

i nput
select
tex tarea
checkbox
radio componentes(vue中自定义组件)

Java
PHP
Python
Go

你选择了:{{language.join('/')}}

v-on指令用于给页面元素绑定事件

在没有使用vue之前;页面标签可以通过设置onXXX响应事件;在vue中可以通过v-on指
令响应事件。


v-for

v-for指令语法实现对数组、对象的遍历
{{a}}

{{i+1}}==={a}

{{user.name}}-- {{user.age}}-- {{user.gender}}--

{{index+1}} {{user.name}} {{user.age}} {{user.gender}}

{{index+1}}-{{key}} {{user.name}} {{user.age}} {{user.gender}}

v-if(v-else)

{{user.name}}-- {{user.age}}-- {{user.gender}}--

{{user.name}}-- {{user.age}}-- {{user.gender}}--

v-show

与if不同show,v-if在条件不满足的时候元素不会存在;v-show条件不满足的时候只是对元素进行隐藏。

HELLO VUE

Vue变异方法

  • {{item}}
  • 你可能感兴趣的:(基础基础,vue.js,前端,javascript)