vue入门案例
1、技术在迭代，有时候你为了生活没有办法，必须掌握一些新的技术，可能你不会或者没有时间造轮子，那么就先把利用轮子吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
<script type="text/javascript" src="./vue.min.js"></script>
</head>
<body> <div id="app">{{message}}</div> <script type="text/javascript">
//创建一个Vue的实例，让这个实例去接管id为app的这个元素
var vue = new Vue({
el:"#app", //el关键字是element单词的缩写，代表元素。#app是id为app。el的值等于#app代表和那个dom节点的id做绑定。
data:{ //data关键字是存放的需求数据。去处理id等于app这一块区域的内容。
message:"hello vue!" //message名称可以根据自己需求起名称。
}
});
</script>
</body>
</html>
2、挂载点，模板，实例之前的关系：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
<script type="text/javascript" src="./vue.min.js"></script>
</head>
<body> <!-- 挂载点，模板，实例之前的关系 --> <!-- 此div标签被称为vue1实例的挂载点。vue1会处理该挂载点下面的内容。 -->
<!-- 挂载点内部的内容被称为模板，模板内容也可以写到template标签里面，切记template值需要使用html元素包含起来。 -->
<div id="app"></div> <!-- 此div标签被称为vue2实例的挂载点 -->
<div id="app2">{{message}}</div> <script type="text/javascript">
//创建一个Vue的实例，让这个实例去接管id为app的这个元素
//实例vue1，创建了一个Vue实例。
var vue1 = new Vue({
el: "#app", //el关键字是element单词的缩写，代表元素。#app是id为app。el的值等于#app代表和那个dom节点的id做绑定。
template: '<h1>I am biehl,{{message}}</h1>', //template标签的值被称为模板内容。
data:{ //data关键字是存放的需求数据。去处理id等于app这一块区域的内容。
message:"hello vue!" //message名称可以根据自己需求起名称。
}
}); var vue2 = new Vue({
el:"#app2",
data:{
message:"你好，vue框架"
} });
</script>
</body>
</html>
3、Vue中方法的使用以及属性的改变，Vue实例中的数据，事件，方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
<script type="text/javascript" src="./vue.min.js"></script>
</head>
<body> <!-- 挂载点，模板，实例之前的关系 --> <!-- 此div标签被称为vue1实例的挂载点。vue1会处理该挂载点下面的内容。 -->
<!-- 挂载点内部的内容被称为模板，模板内容也可以写到template标签里面，切记template值需要使用html元素包含起来。 -->
<div id="app"></div> <!-- 此div标签被称为vue2实例的挂载点 -->
<div id="app2">{{message}}</div> <!-- {{number}}、{{msg}}被称为插值表达式 -->
<!-- <div id="app3">{{number}},{{msg}}</div> --> <!-- v-text是vue的一个属性指令，值是一个变量，代表了h4要显示的变量就是number的值，等同于v-html属性命令，此命令将html进行转义，v-text不转义。 -->
<div id="app3">
<!-- <h4 v-text="number"></h4> -->
<div v-on:click="()=>{alert('world vue!!!')}">{{msg}}</div>
<div v-on:click="handleClick">{{msg}}</div>
<!-- v-on:的简写是@这个符号 -->
<div @click="handleClick2">{{msg}}</div>
</div> <script type="text/javascript">
//创建一个Vue的实例，让这个实例去接管id为app的这个元素
//实例vue1，创建了一个Vue实例。
var vue1 = new Vue({
el: "#app", //el关键字是element单词的缩写，代表元素。#app是id为app。el的值等于#app代表和那个dom节点的id做绑定。
template: '<span>I am biehl,{{message}}</span>', //template标签的值被称为模板内容。
data:{ //data关键字是存放的需求数据。去处理id等于app这一块区域的内容。
message:"hello vue!" //message名称可以根据自己需求起名称。
}
}); var vue2 = new Vue({
el:"#app2",
data:{
message:"你好，vue框架"
}
}); var vue3 = new Vue({
el:"#app3",
data:{
number:, //vue中改变数据的显示，设法改变数据即可，即可完成数据的改变。
msg:"hello vue!"
},
methods:{
handleClick:function(){
console.log("world vue!!!!!!!!");
alert("world vue!!!!!!!!");
this.msg = "world vue!!!"; //在vue的methods中改变data里面的数据，如此调用即可完成数据的改变
},
handleClick2:function(){
this.msg = "hello vue!!!";
},
}
});
</script>
</body>
</html>
4、vue中属性绑定和双向数据绑定。1）、v-bind:等同于:。2）、v-on:等同于@。3）、双向绑定v-model。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
<script type="text/javascript" src="./vue.min.js"></script>
</head>
<body> <!-- vue中属性绑定和双向数据绑定。、v-bind:等同于:。、v-on:等同于@。 -->
<div id="app1">
<div v-bind:title="title">{{msg}}</div>
<div :title="'I am biehl , ' + title">{{msg}}</div>
<!-- v-bind:value等价于:value。 -->
<input type="text" name="userName" v-bind:value="content">
<div>{{content}}</div>
<!-- 双向绑定v-model,指定data的password的值 -->
<input type="password" name="password" v-model="password">
<div>{{password}}</div> </div> <script type="text/javascript">
var vue1 = new Vue({
el:"#app1", //el的值是id，所以一定记得加上#，例如#app1
data:{
msg:"hello vue!",
title:"this is hello vue!!!",
content:"this is content!!!",
password:"",
}
}); </script>
</body>
</html>
5、Vue中计算属性和侦听器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
<script type="text/javascript" src="./vue.min.js"></script>
</head>
<body> <!-- vue中属性绑定和双向数据绑定。、v-bind:等同于:。、v-on:等同于@。 -->
<div id="app1">
<div v-bind:title="title">{{msg}}</div>
<div :title="'I am biehl , ' + title">{{msg}}</div>
<!-- v-bind:value等价于:value。 -->
<input type="text" name="userName" v-bind:value="content">
<div>{{content}}</div>
<!-- 双向绑定v-model,指定data的password的值 -->
<input type="password" name="password" v-model="password">
<div>{{password}}</div>
</div> <br/><br/> <!-- Vue中计算属性和侦听器 -->
<div id="app2">
姓：<input type="text" name="firstName" v-model="firstName" /><br/>
名：<input type="text" name="lastName" v-model="lastName" /> <br/>
<!-- 冗余的显示 -->
姓名：<span>{{firstName}}{{lastName}}</span> <br/>
姓名：<span>{{fullName}}</span><br/> <div>{{count}}</div>
<div v-text="count"></div>
<div v-html="count"></div> <!-- 监听器的使用 --> </div> <script type="text/javascript">
var vue1 = new Vue({
el:"#app1", //el的值是id，所以一定记得加上#，例如#app1
data:{
msg:"hello vue!",
title:"this is hello vue!!!",
content:"this is content!!!",
password:"",
}
}); /* Vue中计算属性和侦听器 */
var vue2 = new Vue({
el:"#app2",
data:{
firstName:"张",
lastName:"三三",
count:,
},
//vue计算属性computed
computed:{
fullName:function(){
return this.firstName + ' ' + this.lastName;
},
},
//监听器,监听某一个数据的变化，当某一个数据变化，就执行自己的逻辑。
watch:{
/*firstName:function(){
this.count++;
},
lastName:function(){
this.count++;
},*/
fullName:function(){
this.count++;
//alert("什么鬼......");
}
}
});
</script>
</body>
</html>
6、Vue中的v-if、v-for、v-show命令。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
<script type="text/javascript" src="./vue.min.js"></script>
</head>
<body> <!-- Vue中的v-if、v-for、v-show命令 -->
<div id="app1">
<!-- v-if会让div标签消失 -->
<div v-if="show">{{msg}}</div>
<button type="button" @click="handleClick">toggle</button> <br/><br/> <!-- v-show标签是将div的样式display属性设置为none的，style="display: none;" -->
<div v-show="show">{{msg}}</div>
<button type="button" @click="handleClick2">toggle</button> <!-- v-for标签进行循环操作 -->
<ul>
<!-- 将list的值放到item里面，然后将item展示出来。:key加强渲染，但是循环值必须不同。 -->
<li v-for="(item,index) of list" :key="item">{{item}}</li>
</ul>
</div> <script type="text/javascript">
var vue1 = new Vue({
el:"#app1",
data:{
msg:"您好，vue!",
show:true,
list:[,,,,,]
},
methods:{
handleClick:function(){
// this.show = !this.show，表示取show得反。这种思路很巧妙。
this.show = !this.show
},
handleClick2:function(){
// this.show = !this.show，表示取show得反。这种思路很巧妙。
this.show = !this.show
}
}
}); </script>
</body>
</html>
7、Vue的全局组件、局部组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
<script type="text/javascript" src="./vue.min.js"></script>
</head>
<body> <div id="app1">
<div>
<!-- v-model数据交互 -->
<input type="text" name="userName" v-model="inputValue"/>
<!-- 点击事件 -->
<button @click="handleClick">提交</button>
<!-- <ul>
循环遍历输出结果
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul> --> <!-- 全局组件 -->
<!-- <ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item">{{item}}</todo-item>
</ul> --> <!-- 局部组件 -->
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item">{{item}}</todo-item>
</ul> </div>
</div> <script type="text/javascript">
// 组件的拆分。全局组建
/*Vue.component('todo-item',{
props:['content'],
template:'<li>{{content}}</li>'
});*/ // 局部组件
var toDoItem = {
props:['content'],
template:'<li>{{content}}</li>'
}; // vue实例
var vue1 = new Vue({
el:"#app1",
//局部组件
components:{
'todo-item':toDoItem
},
data:{
msg:"hello vue!",
inputValue:'',
list:[],
},
methods:{
handleClick:function(){
// vue的思路围绕着数据进行操作的，之前都是操作的dom.
// 判断是否不为空且不为空字符串。
if(this.inputValue != null && this.inputValue != ''){
// 将输入框里面的值加到数组里面，展示在下面的列表里面
this.list.push(this.inputValue),
// 将输入框里面的值设置为空
this.inputValue = ''
}
}
}
}); </script>
</body>
vue入门案例的更多相关文章
- Vue入门案例（二）
创建一个 .html 文件,然后通过如下方式引入 Vue: <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.js ...
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
- Vue入门（二）之数据绑定
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列（三）之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列（五）Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue 入门之 Vuex 实战
Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...
- 09Vue.js快速入门-Vue入门之Vuex实战
9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- Vue 入门之数据绑定
什么是双向绑定? Vue 框架很核心的功能就是双向的数据绑定. 双向是指:HTML 标签数据 绑定到 Vue 对象,另外反方向数据也是绑定的.通俗点说就是,Vue 对象的改变会直接影响到 HTML 的 ...
随机推荐
- 2019-6-5-WPF-拼音输入法
原文:2019-6-5-WPF-拼音输入法 title author date CreateTime categories WPF 拼音输入法 lindexi 2019-6-5 17:6:58 +08 ...
- 用ASP.NET Core构建可检测的高可用服务--学习笔记
摘要 随着现代化微服务架构的发展,系统故障的定位与快速恢复面临着诸多挑战,构建可检测的服务,帮助线上保障团队时刻掌控应用的运行状况越来越重要.本次分享会讲解如何让 ASP .NET Core 应用与现 ...
- 【LeetCode】2. 两数相加
题目 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...
- SPA项目开发之CRUD+表单验证
表单验证 Form组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则, 并将Form-Item的prop属性设置为需校验的字段名即可 <el-form-item label ...
- springmvc学习笔记二：重定向，拦截器，参数绑定
Controller方法返回值 返回ModelAndView controller方法中定义ModelAndView对象并返回,对象中可添加model数据.指定view. 返回void 在Contro ...
- JavaWeb之servlet（1）
servlet servlet:就是一个Java程序,运行在web服务器中,用于接收和响应客户端的http请求.更多是配合动态资源使用.当然静态资源也要使用servlet,只不过Tomcat里面已经定 ...
- 用vue和layui简单写一个响应式数据展示表
在创建项目之前,先把我们需要的文件打包处理 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Android开源日志框架xlog
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/144 xlog的优点 在开发过程中,避免不了要使用日志组件 ...
- Swift相比OC语言有哪些优点
Swift相比OC语言有哪些优点 1.自动做类型推断 2.可以保证类型使用安全 Swif类型说明符 --Swift增加了Tuple表示元组类型 --Swift增加了Optional表示可选类型 常量一 ...
- MySQL 部署分布式架构 MyCAT (五)
分片(水平拆分) 4.全局表 业务使用场景: 如果你的业务中有些数据类似于数据字典,比如配置文件的配置, 常用业务的配置或者数据量不大很少变动的表,这些表往往不是特别大, 而且大部分的业务场景都会用到 ...