web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js，看了网上一些简介，及它和JQuery的对比，发现对于新入门的前端开发来说，Vue 其实也是比较适用的一个框架，其实用性不比JQuery差，感觉还挺有意思，于是研究了
一下其基本用法，下面是整理出来的学习例子(有官网上的，也有自己消化以后整理的)，希望对大家有参考价值。
<html>
<head>
<title>Vue test</title>
</head> <body> <div id="app">
<p>{{ message }}</p>
</div> <div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div> <div id="app-3">
<p v-if="seen">Now you see me</p>
</div> <div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div> <div id="app-4_2">
<ul>
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
</div> <div id="app-5">
<p>{{ message }}</p>
<button v-on:click='reverseMessage'>reverse button</button>
</div> <div id="app-6">
<p>{{ message }}</p>
<input v-model='message'>
</div> <div id="app-7">
<ol>
<!-- Now we provide each todo-item with the todo object -->
<!-- it's representing, so that its content can be dynamic -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<div id="app-7_2">
<ul>
<todo-text v-for="item in textInfoList" v-bind:todo="item"></todo-text>
</ul>
</div> <script src="./vue.min.js"></script>
<script> // 静态数据绑定
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
}) // 动态属性值绑定
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
}) // 控制标签是否显示
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
}) // 遍历对象数组
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
// 直接遍历数组
var app4_2 = new Vue({
el: '#app-4_2',
data: {
todos: [
'Learn JavaScript',
'Learn Vue',
'Build something awesome'
]
}
}) // 绑定一个逆排字符串的函数
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js.'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
}) // 同步用户输入
var app6 = new Vue({
el: '#app-6',
data: {
message: 'test text input.'
}
}) // 动态绑定数据到模板中的变量
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
}) // 注意参数名 todo 及其类型 ['todo'] 都不能变
Vue.component('todo-text', {
props: ['todo'],
template: '<li>{{ todo.line }} - {{ todo.text }}</li>'
})
var app7_2 = new Vue({
el: '#app-7_2',
data: {
textInfoList: [
{
line: 'line one.' ,
text: 'textInfo'
},
{
line: 'line two.' ,
text: 'textInfo'
},
{
line: 'line three.' ,
text: 'textInfo'
}
]
}
}) </script> </body> </html>
web前端——Vue.js基础学习的更多相关文章
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- Web - 前端 Vue.js （1）
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
随机推荐
- stm32 ds18b20 温度传感器
相关文章:http://blog.csdn.net/zhangxuechao_/article/details/74991985 举例 void DS18B20_in() { GPIO_InitTyp ...
- Java基础加强-泛型
/*泛型*/ (泛型是给编译器看的) 泛型是提供给 /*javac编译器使用的*/,可以限定集合中的输入类型,让编译器挡住源程序中的非法输入,编译器编译带类型带类型说明的集合时,会去掉 "类 ...
- DRDA
在谈到分布式DB2数据时,有必要谈谈DRDA. DRDA代表分布式关系数据库体系结构. 它是由IBM开发的一种体系结构,它使关系数据能够在多个平台之间分布. 平台和平台都可以相互通信. 例如,一个DB ...
- 1.Hbase集群安装配置(一主三从）
1.HBase安装配置,使用独立zookeeper,shell测试 安装步骤:首先在Master(shizhan2)上安装:前提必须保证hadoop集群和zookeeper集群是可用的 1.上传:用 ...
- idou老师教你学Istio 26：如何使用Grafana进行可视化监控
使用Grafana插件进行监控是Istio提供的监控能力之一.Istio提供丰富的监控能力,Grafana插件在Istio对Prometheus支持的基础上,为用户提供基于网页仪表面板的可视化监控效果 ...
- Paper Reading:Receptive Field Block Net for Accurate and Fast Object Detection
论文:Receptive Field Block Net for Accurate and Fast Object Detection 发表时间:2018 发表作者:(Beihang Universi ...
- 从客户端中检测到有潜在危险的 request.form值
这里只说ASP.NET MVC的解决方法,ASP.NET已经不碰了. 给控制器加上[ValidateInput(false)]特性即可忽略含有HTML标记的内容. [HttpPost] [Valida ...
- 简单的JAVAWeb选课系统
该系统管理员可以添加和删除学生.教师,教师可以修改自己信息.添加课程.浏览自己课程,学生可以修改自己的信息.选课.浏览全部课程. 首先展示文件: 然后就是一次展示代码: Guanli包中代码: pac ...
- linux命令集合(二)
yum源的配置 yum 得配置yum源,配置阿里云的 两个 yum源 ,阿里云的yum源中,会有 mariadb的软件包 阿里云的yum仓库中,mariadb版本如下 mariadb ...
- Linux查看公网IP
curl cip.cc 查看公网IP curl -s icanhazip.com 查看公网IP, 只显示IP,没有供应商信息