《JavaWeb开发-Vue基础》
1. Vue 概述
-
Vue 概述
- Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
- Vue 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
- Model：是业务模型，其中包含了很多的业务数据，以及业务的处理方法。
- View：视图层只负责数据的展示，其实就是页面展示的html的标签，也可以理解为就是DOM元素。
- 官网：https://v2.cn.vuejs.org
- 框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加商效。
-
Vue快速入门程序
-
新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script> -
在JS代码区域，创建Vue核心对象，定义数据模型
<script> new Vue ({ el:“#app data: { message:"Hello Vue!" } }) </script> -
编写视图
<div id="app"> <input type="text" v-model="message"> { { message }} </div>
-
- 插值表达式
- 形式:{ {表达式 }。
- 内容可以是:
- 变量
- 三元运算符
- 函数调用
- 算术运算
2. Vue-指令
- 常用指令
- 指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如:v-if，v-for…
- 常用指令
- v-bind：为HTML标签绑定属性值，如设置 href，css样式等。
<a v-bind:href="url">传智教育</a><a :href="url">传智教育</a>
- v-model：在表单元素上创建双向数据绑定。
<input type="text" v-model="url">
- v-on：为HTML标签绑定事件。
<input type="button" value="按钮” v-on:click="handle()"><input type="button" value="按钮” @click="handle()">
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <a v-bind:href
- v-bind：为HTML标签绑定属性值，如设置 href，css样式等。
最低0.47元/天 解锁文章
扫一扫
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
