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 转 ...
随机推荐
- .NET中委托性能的演变
.NET中的委托 .NET中的委托是一项重要功能,可以实现间接方法调用和函数式编程. 自.NET Framework 1.0起,委托在.NET中就支持多播(multicast)功能.通过多播,我们可以 ...
- 2021 技术展望丨AV1 在 RTC 应用实践中的现状与展望
线上会议.在线教育.电商直播等多个场景的兴起,也使得实时互动技术从幕后走到台前,得到了更多人的关注.编解码.网络传输.计算机视觉等 RTE 相关的一系列技术也正焕发出更强的生命力.2021 年,在深度 ...
- C#MD5加密的两种方式
在开发过程当中,我们经常会用到MD5加密,下面介绍MD5加密的两种方式: /// <summary> /// MD5字符串加密 /// </summary> /// <p ...
- 如何提取 x64 程序那些易失的方法参数
一:背景 1. 讲故事 最近经常遇到有朋友反馈,在 x64 环境下如何提取线程栈中的方法参数,熟悉 x64 调用协定的朋友应该知道,这种协定范围下,方法的前四个参数都是用寄存器传递的,比如rcx,rd ...
- python之操作注册表
与注册表操作相关的函数可以分为打开注册表.关闭注册表.读取项值.c添加项值.添加项,以及删除项等几类. 描述 HKEY_CLASSES_ROOT,是HKEY_LOCAL_MACHINE\Softwar ...
- [大数据]Hadoop HDFS文件系统命令集
基本格式: hadoop fs -cmd [args] 1 Query 显示命令的帮助信息 # hadoop fs -help [cmd] 查看hadoop/hdfs的用户 # hdfs dfs -l ...
- Sqlmap注入dvwa平台low级别
工具介绍:sqlmap是一款开源的软件 SQL注入攻击是黑客对数据库进行攻击的常用手段之一.随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多.但是由于程序员的水平及经验也参差不 ...
- 逍遥自在学C语言 | 位运算符&的高级用法
前言 在上一篇文章中,我们介绍了&运算符的基础用法,本篇文章,我们将介绍& 运算符的一些高级用法. 一.人物简介 第一位闪亮登场,有请今后会一直教我们C语言的老师 -- 自在. 第二位 ...
- FreeSWITCH添加iLBC编码及转码
操作系统 :CentOS 7.6_x64 FreeSWITCH版本 :1.10.9 一.安装ilbc库 从第三方库里下载指定版本: git clone https://freeswitch.org/s ...
- TEC-6计算机组成原理实验（简图）
TEC-6计算机组成原理实验