Vue基础视频教程(一)

1、github上的网址：https://github.com/vuejs/vue

2、Vue中文文档：https://cn.vuejs.org/v2/guide/installation.html

3、CDN：http://www.bootcdn.cn/

4、看哥们儿，分享给我的视频-->

基础实验代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<!-- <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="app"><counter heading="Likes" color="green"></counter><counter heading="dislikes"color="red"></counter>
</div>
<template id="my-template"><div><h1>{{heading}}</h1><button @click="count+=1">Submit {{count}}</button></div>
</template>
<script>
Vue.component('counter',{template:'#my-template',props:['heading','color'],data:function(){return {count:0};}
});
new Vue({el: '#app',
})
</script>
</body>
</html>

实验结果为：

5、computed使用：

需要写代码逻辑和业务逻辑，放在compute当中即可。

<body>
<div id="app">Level {{level}}
</div>
<script>new Vue({el: '#app',data:{points:200,},computed:{level:function(){if(this.points<=100){return '普通会员';}return 'VIP会员'}},
})
</script>
</body>

运行结果为：

6、v-for、v-class(或者':class')、@click的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<!-- <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<style>.completed{text-decoration: line-through;}
</style>
</head>
<body>
<div id="app"><ul><li @click="toggleTasks(task)" :class="{'completed':task.completed}"v-for="task in tasks">{{task.body}}</li></ul>
</div>
<script>new Vue({el: '#app',data:{tasks:[{body:'go to the movie',completed:false},{body:'learn vue js in action',completed:true},{body:'go to the shop',completed:false}]},computed:{username:function(){return this.first+' '+this.last;}},methods:{toggleTasks:function(task){task.completed=!task.completed}}
})
</script>
</body>
</html>

运行结果：

7、组件化：

数据传输：先new Vue中的data中的，再到body组件中的，最后到template标签中的引用。前提是把组件中的对data的引用包含到Vue.component中的props属性中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<!-- <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<style>.completed{text-decoration: line-through;}
</style>
</head>
<body>
<div id="app"><task-app :list="tasks"></task-app>
</div>
<template id="task-template"><div><h1>My tasks <span v-show="remaining">({{remaining}})</span></h1><ul><li @click="task.completed=!task.completed":class="{'completed':task.completed}"v-for="task in list">{{task.body}}<strong @click="deleteTask(task)">X</strong></li></ul>
</div>
</template>
<script>
Vue.component('task-app',{template:'#task-template',props:['list'],methods:{toggleTasks:function(task){task.completed=!task.completed},deleteTask:function(task){this.list.splice(task,1);//用来删除某数据,zhu}},computed:{remaining:function(){return this.list.filter(function(task){return !task.completed;}).length;}},
})
new Vue({el: '#app',data:{tasks:[{body:'go to the movie',completed:false},{body:'learn vue js in action',completed:true},{body:'go to the shop',completed:false}]},computed:{username:function(){return this.first+' '+this.last;}},})
</script>
</body>
</html>

运行效果：

Vue基础视频教程(一)相关推荐

Blender材质和着色基础视频教程 CGCookie – Fundamentals of Blender Materials and Shading
Blender材质和着色基础视频教程 CGCookie – Fundamentals of Blender Materials and Shading Blender材质和着色基础视频教程 CGCoo ...
java基础入门传智播客源码_Java-_2020年版Java零基础视频教程（Java 0基础，Java初学入门）魔鬼讲师老杜出品...
不会闲聊!!!不会扯淡!!!小UP只会分享与Java相关的学习资源还记得那年带你Java入门的一声"吼"吗? B站目前播放量已经快到450多万播放量的Java零基础教程的创作者& ...
视频专辑：Photoshop基础视频教程
为什么80%的码农都做不了架构师?>>> 专辑:Photoshop基础视频教程简介:Photoshop基础视频教程 1 1. 软件界面介绍 [photoshop基础教程] ...
python基础教程视频(全13集)-Python基础视频教程（600集）【传智播客精品教程】...
Python基础视频教程初级共600节课本套视频是传智播客紧抓未来最大趋势--人工智能,应运而生的一套Python入门视频教程,Python是学习人工智能的首选语言,而该视频是专门针对零基础的学员 ...
python基础教程视频(全13集)-Python基础视频教程全集
原标题:Python基础视频教程全集 Python编程语言的定位是"优雅"."明确"."简单",所以对于Python初学者来说,学起来没有那 ...
mysql核心数据库_从MySQL基础进军MySQL核心架构 178集MySQL数据库核心基础视频教程 MySQL基础案例教程...
从MySQL基础进军MySQL核心架构 178集MySQL数据库核心基础视频教程 MySQL基础案例教程课程目录 (1) 01MySQL基础_课程引入.avi (2) 02MySQL基础_为什么学习 ...
（vue基础试炼_05）简单组件之间的传值
接上一篇:(vue基础试炼_04)使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256 文章目录一.上篇回顾 ① 代 ...
（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容
接上一篇:(vue基础试炼_01)使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156 文章目录 ...

Vue基础视频教程(一)

Vue基础视频教程(一)相关推荐

最新文章

热门文章