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 转 ...
随机推荐
- Axios的相关应用
Axios 的案例应用 要求利用axios实现之前利用AJAX实现的验证用户是否登录的案例 鉴于这两种语法的相似性,只需要在AJAX里面的注册界面里面的script标签里面包含的代码修改为如下代码即可 ...
- Sql 注入方案合集
[以mysql 数据库为例] [参考书目:sqlilabs过关手册注入天书 https://www.cnblogs.com/lcamry/category/846064.html] 推荐看原书,这篇文 ...
- PatriotCTF 2022 RE
PatriotCTF 2022 RE String Cheese ida 打开 Shift+F12 即可得到flag PCTF{d0nt_string_m3_410ng_b3_my_v413ntin3 ...
- Kattis mapcolouring（状压dp）
刚知道vj上查看别人代码,看不到汉字...我理解的都注明后边了. #include <bits/stdc++.h> #define ll long long #define met(a, ...
- CAS 6.x + Delegated Authentication SAML2.0 配置记录
最近领导派了一个活儿, 需要把我们CAS系统的身份识别交给甲方的系统, 甲方的系统是SAML2.0的协议. 由于之前对SAML2.0协议了解不多,折腾了不少时间,在这里记录一下.以后忘掉还可以看看. ...
- Python——高级数据类型（七）
1. 列表数据类型的声明与访问 # coding=utf-8 #列表数据类型的声明与访问 my_list =[1,2,3,4,5] # 列表中的元素 print (my_list) # 0 1 2 3 ...
- springboot实现验证码功能
实现验证码功能 先在utils包下创建一个ValidateImageCodeUtils.class package com.wfszmg.demo.utils; import javax.imagei ...
- SICP：求值和环境模型（Python实现）
绪论 我们在第一章引进复合过程时,采用了求值的代换模型定义了将过程应用于实参(arguments)的意义: 将一个复合过程应用于一些实参,也就意味着用实参替换过程体里对应的形参(formal para ...
- 【Visual Leak Detector】配置项 ForceIncludeModulesmd
说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记.本篇介绍 VLD 配置文件中配置项 ForceIncludeModules 的使用方法. 同系列文章目录可见 <内存泄漏检测工具&g ...
- 我没能实现始终在一个线程上运行 task
前文我们总结了在使用常驻任务实现常驻线程时,应该注意的事项.但是我们最终没有提到如何在处理对于带有异步代码的办法.本篇将接受笔者对于该内容的总结. 如何识别当前代码跑在什么线程上 一切开始之前,我们先 ...