2 Vue.js基础
1 简易计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body> <div id="app" v-model="opt">
<input type="text" v-model="n1"> <select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option> </select >
<input type="text" v-model="n2"> <input type="button" value="=" @click="calc"> <input type="text" v-model="result"> </div> <script>
var vm=new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:0,
opt:'+'
},
methods:{
calc(){
/*
switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break; default:
break;
*/
//正式项目不推荐下面的写法
var codeStr='parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
this.result =eval(codeStr)
} }
} )
</script>
</body>
</html>
2. Vue中的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script>
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- <h1 class="red thin">这是一个H1！！！</h1> --> <!--第一种使用方法，直接传递一个数组进去，必须用单引号来分开才会认为这是一个变量，否则会直接默认为是一个字符串-->
<!-- <h1 :class="['red','italic']">这是一个H1！！！</h1> --> <!--在数组中使用三元表达式-->
<!-- <h1 :class="['red','italic',flag?'active':'']">这是一个H1！！！</h1> --> <!--用对象的形式来代替三元表达式-->
<!-- <h1 :class="['red','italic',{'active':flag}]">这是一个H1！！！</h1> --> <!-- 直接使用对象,或者也可以直接把classobj中的内容 直接放到class中--> <h1 :class="calssobj">这是一个H1！！！</h1> </div> <script>
var vm=new Vue({
el:"#app",
data:{
flag:true,
calssobj:{red:true,thin:true,italic:false,active:false}
},
methods:{ }
})
</script>
</body>
</html>
3. Vue的Class样式的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script>
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- <h1 class="red thin">这是一个H1！！！</h1> --> <!--第一种使用方法，直接传递一个数组进去，必须用单引号来分开才会认为这是一个变量，否则会直接默认为是一个字符串-->
<!-- <h1 :class="['red','italic']">这是一个H1！！！</h1> --> <!--在数组中使用三元表达式-->
<!-- <h1 :class="['red','italic',flag?'active':'']">这是一个H1！！！</h1> --> <!--用对象的形式来代替三元表达式-->
<!-- <h1 :class="['red','italic',{'active':flag}]">这是一个H1！！！</h1> --> <!-- 直接使用对象,或者也可以直接把classobj中的内容 直接放到class中--> <h1 :class="calssobj">这是一个H1！！！</h1> </div> <script>
var vm=new Vue({
el:"#app",
data:{
flag:true,
calssobj:{red:true,thin:true,italic:false,active:false}
},
methods:{ }
})
</script>
</body>
</html>
4. Vue的v-for的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script> </head>
<body>
<div id="app">
<!-- <p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
<p>{{list[4]}}</p>
<p>{{list[5]}}</p> --> <!-- <p v-for="(item,i) in list">索引：{{i}}--{{item}}</p> -->
<p v-for="(user,i) in LT">ID:{{user.ID}} --- name:{{user.name}} --- index:{{i}}</p> </div> <script>
var vm=new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6,],
LT:[
{ID:1,name:'11'},
{ID:2,name:'22'},
{ID:3,name:'33'},
{ID:4,name:'44'} ]
},
methods:{}
})
</script> </body>
</html>
5. Vue v-for对象以及key的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script> </head>
<body>
<div id="app">
<!-- 遍历对象身上的键值对时 除了val,key还有一个索引i -->
<!-- <p v-for="(val,key,i) in user"> 值：{{val}} --- 键：{{key}} 索引：{{i}}</p> -->
<!-- <p v-for="count in 10">这是第 {{count}} 次循环</p> //循环数字，起始是1 --> <!-- for循环的key的使用 -->
<div>
<label >Id:
<input type="text" v-model="id">
</label> <label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div> <!-- 1 在使用key的时候一定要使用v-bind属性绑定形式，制定key的值
2 在组建中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题必须在使用v-for的同时，
制定唯一的字符串/数字类型：key值 -->
<p v-for="item in list" :key="item"> <!-- 可以保证数据的唯一性 -->
<input type="checkbox">{{item.id}} --- {{item.name}}
</p> </div> <script>
var vm=new Vue({
el:'#app',
data:{
list:[
{id:1,name:'唐'},
{id:2,name:'宋'},
{id:3,name:'元'},
{id:4,name:'明'},
{id:5,name:'清'}
]
},
methods:{
add(){
this.list.unshift({id:this.id,name:this.name});
}
}
})
</script> </body>
</html>
6. Vue的v-if和v-show的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body> <div id="app">
<input type="button" value="点击" @click="flag=!flag">
<!--
v-if的特点：每次都会重新删除或创建元素 有较高的切换性能消耗
v-show的特点：每次不会进行DOM的删除或创建操作，只是切换了元素的display：nene的属性 有较高的初始或渲染消耗
如果元素要频繁的切换最好不要使用v-if
如果是永久性的不显示，则推荐v-if
-->
<P v-if="flag">Hello</P>
<p v-show="flag">Word</p>
</div> <script>
//2.创建一个Vue实例
//当我们带入包之后，在浏览器内存中就多了一个Vue构造函数
var vm =new Vue(
{
el:'#app',
data :{
flag:true
}
}
) </script>
</body>
</html>
2 Vue.js基础的更多相关文章
- Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- Vue.js基础拾遗
本篇目录: 模版语法 插值 指令 v-bind指令 v-on指令 计算属性与侦听器 计算属性VS方法 计算属性VS侦听属性 Class与Style绑定 绑定HTML Class 绑定内联样式 条件渲染 ...
- Vue.js 基础快速入门
Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...
- Vue.js基础语法（三）
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 记录21.07.22 —— Vue.js基础（一）
VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...
- 一份不错的vue.js基础笔记！！！！
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
- Vue.js 基础示例
为 Vue.js 初学者写了一些简单的示例,在线示例 示例源码 了解更多请查看 Vue.js 官网文档:http://vuejs.org.cn/guide/
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
随机推荐
- 卷积神经网络基础（CNN）【转载】
作者: Sanjay Chan [ http://blog.csdn.net/chenzomi ] 背景 之前在网上搜索了好多好多关于CNN的文章,由于网络上的文章很多断章取义或者描述不清晰,看了很多 ...
- 如何利用scrapy新建爬虫项目
抓取豆瓣top250电影数据,并将数据保存为csv.json和存储到monogo数据库中,目标站点:https://movie.douban.com/top250 一.新建项目 打开cmd命令窗口,输 ...
- VB中的SSTab控件隐藏选项卡方法
请教下,VB中Sstab控件,如何隐藏选项卡呢? SSTab1.TabVisible(1) = False object.TabVisible(tab) [ = boolean ] tab 数值表达式 ...
- python数字图像处理（二）关键镜头检测
镜头边界检测技术简述 介绍 作为视频最基本的单元帧(Frame),它的本质其实就是图片,一系列帧通过某种顺序组成在一起就构成了视频.镜头边界是视频相邻两帧出现了某种意义的变化,即镜头边界反映了视频内容 ...
- flutter 布局简介
import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget ...
- Centos修改默认运行级别
一.centos默认运行级别 下面是linux的默认运行级别.vim /etc/inittab即可查看. # Default runlevel. The runlevels used are: # - ...
- Stree
题目 给出n个点,m条有权边,现对于每一条边,你需要回答出包含这条边的最小生成树的总边权值. 分析 首先我们可以构造一个对于这n个点,m条有权边的最小生成树,显然,这是一棵最小的生成树. 那么这棵生成 ...
- JDK1.8 LinkedList双向链表源码
序言 LinkedList是一个双向链表 也就是说list中的每个元素,在存储自身值之外,还 额外存储了其前一个和后一个元素的地址,所以也就可以很方便地根据当前元素获取到其前后的元素 链表的尾部元素的 ...
- 你肯定不知道的oracle数据库和sql server的这些区别
它们两者之间的区别主要体现在六大方面: 一是开放性. 1.SQL Server 只可在windows上运行,缺乏开放性,操作系统的稳定对数据库是非常重要的. Windows9X系列产品比较偏重于桌面应 ...
- B/S实现大视频上传
在公司做B/S 开发与维护三年啦, 对B/S架构的了解也是只知大概,对于这种基础知识还是很有必要理一理哒.趁空去网上查阅了资料,顺便整理一份笔记供以后查询. 一. B/S的概念 B/S(Brower/ ...