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 转 ...
随机推荐
- Android笔记--修改Device File Explorer的文件打开方式
在首次打开该文件时,不小心选错了打开方式,导致以后每次打开也是同样的打开方式,也不会弹出第一次那样的打开方式的选择弹窗 在这里提供修改文件的默认打开方式的方法: 首先通过File->settin ...
- Markdown合并单元格
参考博客:https://blog.csdn.net/qq_32042527/article/details/88084130
- webgl 系列 —— 渐变三角形
其他章节请看: webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析:varying变量.合并缓冲区.图形装配.光栅化.varying 内插 绘制三个点v1 需求:绘制三个相同颜色的点, ...
- 操作系统笔记<1>
操作系统的概念 指控制和管理整个计算机系统的硬件和软件资源,并合理地组织调度计算机的工作和资源的分配 以提供给用户和其他软件方便的接口和环境 是计算机系统中最基本的系统软件 操作系统的功能 (系统资源 ...
- Windows 系统下怎么获取 UDP 本机地址
Windows 系统下怎么获取 UDP 本机地址 我们知道 UDP 获取远端地址非常简单,通常接口 recvfrom 就可以直接获取到远端的地址和端口:如果获取 UDP 的本机地址就需要点特殊处理了, ...
- java注解与反射--3
java注解与反射--3 类的加载与ClassLoader java内存 堆 存放new的对象和数组 可以被所有的线程共享,不会存放别的对象引用 栈 存放基本变量类型 引用对象的变量 方法区 可以被所 ...
- 实现一个CRDT工具库——VClock 时钟向量类
这段代码实现了一个VClock类,它是基于GCounter实现的.VClock是一种向量时钟,它可以用于在分布式系统中对事件发生的顺序进行排序.VClock的实现方式是将每个节点的计数器值存储在一个字 ...
- 全网最详细中英文ChatGPT-GPT-4示例文档-复杂函数快速转单行函数从0到1快速入门——官网推荐的48种最佳应用场景（附python/node.js/curl命令源代码，小白也能学）
目录 Introduce 简介 setting 设置 Prompt 提示 Sample response 回复样本 API request 接口请求 python接口请求示例 node.js接口请求示 ...
- mysql迁移：xtrabackup迁移mysql5.7.32
问题描述:利用外部xtrabackup工具来做迁移mysql数据库,或者恢复数据库 xtrabackup迁移mysql 1.环境 mysql源库 mysql目标迁移库 IP 192.168.163.3 ...
- Hooks与事件绑定
Hooks与事件绑定 在React中,我们经常需要为组件添加事件处理函数,例如处理表单提交.处理点击事件等.通常情况下,我们需要在类组件中使用this关键字来绑定事件处理函数的上下文,以便在函数中使用 ...