Vue 新建项目+基本语法
新建项目：
导入依赖： <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
基本语法
v-bind指令：可以动态绑定变量message
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-bind:title="message">
<!-- 鼠标悬停时展示message-->
我在这里
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello,vue!"+new Date().toLocaleString()
}
});
</script>
</body>
</html>
v-if，v-else:
动态绑定布尔值变量ok的值，在网页控制台通过vm.ok=false测试页面的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层模板-->
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
// 布尔型的变量
ok:true
}
})
</script>
</body>
</html>
v-for：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="(item,index) in items">
{{item.message}}--{{index}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
items:[
{message:'狂神java'},
{message:'狂神java2'},
{message:'狂神java3'},
]
}
});
</script>
</body>
</html>
动态绑定布尔值变定义方法methods：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayhello">点击这里</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:'狂神java'
},
methods:{
sayhello:function (){
alert(this.message);
}
}
});
</script>
</body>
</html>
<!--
动态绑定：
在修改v-model中message的值时，也会同时改变{{message}}
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
输入的文本内容：<input type="text" v-model="message">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:'狂神java'
}
});
</script>
</body>
</html>
<!--
双向动态绑定
-->
<!--
双向动态绑定
：v-model绑定变量qin，变量qin绑定value的属性值，前端选择哪个会确定value属性值，从而确定qin变量值
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
性别：
<input type="radio" name="sex" value="男" v-model="qin">男
<input type="radio" name="sex" value="女" v-model="qin">女
<p>
选中了哪个：{{qin}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
qin:""
}
});
</script>
</body>
</html>
<!--
下拉框在动态绑定的应用
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
下拉框：
<select v-model="selected">
<option value="" disabled>--请选择-- </option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>value:{{selected}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
selected:''
}
});
</script>
</body>
</html>
总结：通过v-model实现动态绑定
Vue 新建项目+基本语法的更多相关文章
- vue新建项目
一直都被如何用vue.js新建一个项目的问题困扰着,经过好久的实践,终于搞清楚如何用vue新建项目了: 1.官网对于vue-cli介绍: Vue.js provides an official CLI ...
- vue 新建项目
1. 首先安装node.js,安装时一直点Next,知道Finish就可以安装成功 2. 打开控制命令执行程序cmd,输入node -v ,可以查看node的版本信息,即安装成功,我安装的是v8.12 ...
- vue新建项目之标准路由配置--父子嵌套界面
配置路由所有用到的地方总共四步或者说四处 1.index.js(src--router--index.js) 父子界面嵌套---需要配置子路由 import Vue from 'vue' import ...
- vue新建项目之饿了么组件标准配置
main.js import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import ...
- Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法
转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...
- Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法
添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角 ...
- vue初尝试--新建项目
这是一篇技术贴--如何新建一个基于vue的项目 1.下载对应版本的nodejs安装,下载的nodejs都集成了npm,所以nodejs安装完成之后npm也对应安装完成了. 安装完成之后可以在cmd命令 ...
- redis数据库-VUE创建项目
redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据 ...
- Vue 实战项目开发流程
一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...
- #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目（一）
目标: 为已有的vue项目搭建 karma+mocha+chai 测试框架 编写组件测试脚本 测试运行通过 抽出共通 一.初始化项目 新建项目文件夹并克隆要测试的已有项目 webAdmin-web 转 ...
随机推荐
- 自己动手从零写桌面操作系统GrapeOS系列教程——15.用汇编向屏幕输出字符
学习操作系统原理最好的方法是自己写一个简单的操作系统. 在上一讲中我们介绍了屏幕显示的原理,本讲我们来实战一下. 一.向屏幕输出一个字符mbr4.asm mbr4.asm中的代码如下: ;将屏幕第一行 ...
- flutter---->阿里云oss的插件
目前为止,阿里云官方并没有dart版本的oss sdk,所以才开发了这个插件flutter_oss_aliyun提供对oss sdk的支持. flutter_oss_aliyun 一个访问阿里云oss ...
- NodeJS V8引擎的内存和垃圾回收器（GC）
一.为什么需要GC 程序应用运行需要使用内存,其中内存的两个分区是我们常常会讨论的概念:栈区和堆区. 栈区是线性的队列,随着函数运行结束自动释放的,而堆区是自由的动态内存空间.堆内存是手动分配释放或者 ...
- 随机服务系统模拟—R实现（三）
M/M/c随机服务系统的模拟 M/M/1服务系统:(1)队列长度没有限制:(2)顾客到达的时间间隔和服务时间均服从指数分布:(3)服务台数量为c. 一.M/M/c随机服务系统的模拟 在M/M/c排队系 ...
- 图与网络分析—R实现（一）
图与网络 一个网络G,也可以称为图(graph)或网络图,是一种包含了节点V(即网络参与者,也称顶点)与边E(即节点之间的连接关系)的数学结构,记作G={V,E}.可以使用一个矩阵来存放节点之间的连接 ...
- LeeCode 90双周赛复盘
T1: 差值数组不同的字符串 思路:数组遍历 若前两个字符串差值数组不同,则只需要继续计算第三个字符串的差值数组即可得到答案 若前两个字符串差值数组相同,则依次遍历后续字符串,直至找到不同的差值数组 ...
- DG：windows密码文件
问题描述:搭建DG,找不到密码文件的位置,就给备库重新生成了一个密码文件,传到了备库,但是拉到了备库以后,恢复过程中,trace日志在报错,后来才知道windows下的密码文件跟linux平台下的面文 ...
- 【SSM项目】尚筹网（三）基于Servlet3.0项目搭建：异常映射和拦截器机制
1 异常映射 1.1 目标 使用异常映射对项目的异常和错误提示进行统一管理. 1.2 思路 对于普通的页面请求,异常映射机制捕获到handler方法抛出的异常后会响应为一个错误页面,对于处理ajax请 ...
- 宝塔ftp无法连接的解决方案
宝塔面板现在使用率非常的高.今天把自己的踩坑处理方法记录一下. 在配置号宝塔面板ftp后,使用vscode的sftp插件,发现一直链接不上.一度以为自己配置文件,配置的参数有问题.各种度娘后,花了好长 ...
- 劲（很）霸（不）酷（好）炫（用）的NLP可视化包：Dodorio 使用指北
朋友们,朋友们,事情是这样的.最近心血来潮,突然想起很久以前看过的一个NLP可视化包.它的效果是下面这个样子: 在此之前,已经有一些文章从论文的角度对这个包进行了介绍,详情请见 推荐一个可交互的 At ...