vue.js 初步学习
跟着b站上的视频来学
首先什么是vue.js？
跟着b站上视频来学：(oﾟvﾟ)ノ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="vue.min.js"></script>
<!-- 绑定数据-->
<!-- <div id="app">-->
<!-- <counter heading="Likes" ></counter>-->
<!-- <counter heading="Disliakes" ></counter>-->
<!-- </div>--> <!-- <template id="counter-template">-->
<!-- <div>-->
<!-- <h1>{{heading}}</h1>--> <!-- <button @click="count += 1" >Submit {{count}}</button>-->
<!-- </div>-->
<!-- </template>-->
<!-- <script>-->
<!-- Vue.component('counter',{-->
<!-- template:'#counter-template',-->
<!-- props:['heading'], //代表heading是变量-->
<!-- data:function () {-->
<!-- return{count:};-->
<!-- }-->
<!-- })--> <!-- new Vue({-->
<!-- el: '#app',-->
<!-- data:{-->
<!-- mygame:"shsdhjsd"-->
<!-- }-->
<!-- })-->
<!-- </script>--> <!-- 第一步：调用数据-->
<!-- <div id="app">-->
<!-- <p>game you love</p>-->
<!-- <input v-model="mygame">-->
<!-- </div>-->
<!-- <script>-->
<!-- new Vue({-->
<!-- el: '#app',-->
<!-- data:{-->
<!-- mygame:"超级马里奥"-->
<!-- }-->
<!-- })-->
<!-- </script>--> <!-- v-on 调用不同的事件（简写为@）-->
<!-- <div id="app">-->
<!-- <p>你最喜欢的游戏:{{mygame}}</p>-->
<!-- <button v-on:click="btnclick('我的世界')">我的世界</button>-->
<!-- <button v-on:click="btnclick('塞尔达')">塞尔达</button>-->
<!-- <button v-on:click="btnclick('勇者斗恶龙')">勇者斗恶龙</button>-->
<!-- </div>-->
<!-- <script>-->
<!-- new Vue({-->
<!-- el: '#app',-->
<!-- data:{-->
<!-- mygame:"超级马里奥"-->
<!-- },-->
<!-- methods:{-->
<!-- btnclick:function (pname) {-->
<!-- this.mygame = pname;-->
<!-- }-->
<!-- }-->
<!-- });-->
<!-- </script>--> <!-- 组件：-->
<!-- item循环games数组，得到元素，将得到的元素给组件中的变量game进行操作-->
<!-- <div id="app">-->
<!-- <ol>-->
<!-- <game-item v-for="item in games" v-bind:game="item"></game-item>-->
<!-- </ol>-->
<!-- </div>-->
<!-- <script>-->
<!-- Vue.component('game-item',{-->
<!-- props:['game'],-->
<!-- template:'<li>{{game.title}}</li>'-->
<!-- }--> <!-- )-->
<!-- new Vue({-->
<!-- el: '#app',-->
<!-- data:{-->
<!-- games:[-->
<!-- {title:'斗地主'},-->
<!-- {title:'打麻将'},-->
<!-- {title:'UNO'}-->
<!-- ]-->
<!-- }--> <!-- });-->
<!-- </script>--> <!--过滤器：格式化变量内容的输出(日期格式化、字母大小写。。)-->
<!-- <div id="app">-->
<!-- <p>{{message}}</p>-->
<!-- <p>{{message | toupper}}</p>-->
<!-- <hr/>-->
<!-- <p>现在的vue.js的学习进度是{{num | topercentage}}</p>-->
<!-- </div>-->
<!-- <script>-->
<!-- new Vue({-->
<!-- el: '#app',-->
<!-- data:{-->
<!-- message:'hello world!',-->
<!-- num : 0.3,-->
<!-- },-->
<!-- filters:{-->
<!-- toupper:function (value) {-->
<!-- return value.toUpperCase();-->
<!-- },-->
<!-- topercentage:function (value) {-->
<!-- return value*+'%';-->
<!-- }-->
<!-- }-->
<!-- });-->
<!-- </script>--> <!-- 计算属性：处理元数据，便于进行二次利用-->
<!-- <div id="app">-->
<!-- 今年发行的游戏的价格是{{price}}，含税价格是{{priceInTax}},折合位人民币{{priceChinaRMB}}.-->
<!-- </div>-->
<!-- <script>-->
<!-- new Vue({-->
<!-- el: '#app',-->
<!-- data:{-->
<!-- price:,-->
<!-- },-->
<!-- computed:{-->
<!-- priceInTax:function () {-->
<!-- return this.price*1.08;-->
<!-- },-->
<!-- priceChinaRMB:function () {-->
<!-- return Math.round(this.priceInTax/16.75);-->
<!-- }-->
<!-- }--> <!-- });-->
<!-- </script>--> <!-- 监视属性(监视属性是否发生变化)：与computed属性类似，用于观察变量的变化，然后进行处理-->
<!-- <div id="app">-->
<!-- 今年发行的游戏的价格是{{price}}，含税价格是{{priceInTax}},折合位人民币{{priceChinaRMB}}.-->
<!-- <hr/>-->
<!-- <button @click="btnClick(10000)">加价10000</button>-->
<!-- </div>-->
<!-- <script>-->
<!-- new Vue({-->
<!-- el: '#app',-->
<!-- data:{-->
<!-- price:,-->
<!-- priceInTax:,-->
<!-- priceChinaRMB:,-->
<!-- },-->
<!-- watch:{-->
<!-- price:function (newVal,oldVal) {-->
<!-- console.log(newVal,oldVal);-->
<!-- this.priceInTax = Math.round(this.price *1.08);-->
<!-- this.priceChinaRMB = Math.round(this.priceInTax /16.75);-->
<!-- }-->
<!-- },-->
<!-- methods:{-->
<!-- btnClick:function (newPrice) {-->
<!-- this.price += newPrice;-->
<!-- }-->
<!-- }-->
<!-- });-->
<!-- </script>--> <!-- v-bind:为html标记绑定样式单属性-->
<!-- <style>-->
<!-- .active{-->
<!-- color:red;-->
<!-- }-->
<!-- </style>--> <!-- <div id="app">-->
<!-- <div v-bind:class="{active:isActive}">红色文本1</div>-->
<!-- <div :class="{active:isActive}">红色文本1</div>-->
<!-- <button @click="btnClick">改变文本颜色</button>-->
<!-- </div>-->
<!-- <script>-->
<!-- new Vue({-->
<!-- el: '#app',-->
<!-- data:{-->
<!-- isActive:true,-->
<!-- },-->
<!-- methods:{-->
<!-- btnClick:function () {-->
<!-- this.isActive = false;-->
<!-- }-->
<!-- }-->
<!-- });-->
<!-- </script>--> <!-- Class对象绑定:为html绑定class对象-->
<style>
.active{
color:red;
}
.big{
font-weight: bolder;
font-size: 64px;
}
</style> <div id="app">
<div v-bind:class="myClass">红色文本1</div>
<button @click="btnClick">改变文本大小</button>
</div>
<script>
new Vue({
el: '#app',
data:{
myClass:{
active:true,
big:true,
}
},
methods:{
btnClick:function () {
this.myClass.big = !this.myClass.big;
}
}
});
</script> </body>
</html>
vue.js 初步学习的更多相关文章
- Vue.JS入门学习随笔
PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vjuː/, 类似于view ...
- 从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
- vue.js的学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js路由学习笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
随机推荐
- python中pop(),popitem()的整理
在python中,列表,字典,有序字典的删除操作有些凌乱,所以决定记录下,以便以后用乱了. 列表: 列表删除有三种方式: l.pop() l.remove() del l[3:8] 已下面的code为 ...
- sublime Text3文件路径提示功能
1>启动sublime Text3编辑器: 2> 点开菜单“preferences”——“package control”: 3>在弹出的下拉框中选择“install package ...
- 【C# 开发技巧】番外篇故事-我是一个线程
我是一个线程 我是一个线程,一出生就被编了一个号——0x3704,然后被领到一间昏暗的屋子里,在这里,我发现了很多和我一模一样的同伴.我身边的同伴0x6900待的时间比较长,他带着沧桑的口气对我说:“ ...
- iframe里访问父级里的方法属性
window.parent.attributeName; // 访问属性attributeName是在父级窗口的属性名 window.parent.Func(); // 访问属性Func()是在父 ...
- GitLab基本使用
一.引言 在微服务架构中,由于我们对系统的划分粒度足够小,服务会很多,而且也存在经常迭代的情况.如果还按照以前的部署方式显得非常吃力和复杂,并且很容易出现错误.而随着容器技术的发展,这个时候持续集成( ...
- 【C++札记】标准模板库string
介绍 c++中字符串string对象属于一个类,内置了很多实用的成员函数,操作简单,方便更直观. 命名空间为std,所属头文件<string> 注意:不是<string.h>. ...
- 猴子补丁(Monkey Patching)
猴子补丁是我在面试的时候接触的一到题,学python的时候,我根本就没有听说这个概念!那接下来我们来分析一下: 1.什么是猴子补丁? 2.猴子补丁的功能? 3.猴子补丁的应用场景? 一.什么是猴子补丁 ...
- Django打印出在数据库中执行的语句
有时我们需要看models操作时对应的SQL语句, 可以用如下方法查看--- 在django project中的settings文件尾部添加如下代码 LOGGING = { 'version': 1, ...
- Django 关联查询
查询id=1的XXXXX关联的YYYYY信息 a = XXXXX.objects.get(id=1) a.YYYYY.all() 查询id=1的YYYYY关联的XXXXX信息 b = YYYYY.ob ...
- vuex 理解
为什么要用vuex?页面由多个视图组成,用户操作会引视图的状态变化. 多个视图依赖于同一状态(例如:菜单导航) 来自不同视图的行为需要变更同一状态(例如:评论弹幕) vuex 的作用 为vue.js开 ...