在学习Vue之前,先熟悉HTML和CSS这两个语言,并且有一定的JavaScript语言的基础。相对而言前面两个大部分都是标签和引用之类的,三五天的样子就应该看的差不多不用特别深究。JavaScript语言是一个需要认真学习并且变化相对而言比较多的,在学习的同时可以一同学习Jquery会使得学习不算特别枯燥(Jquery在简化JavaScript的部分起到了很大的作用)
在这里推荐几个网站:
- CSS的一些小应用(英文网站)
- CSS学习过程可能遇到的问题(中文网站)
- 热门的前端代码案例分享
目录
Vue的介绍
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试。
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 script 标签引入
Vue.js的教程案例
基本的v-的模板语法,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue Test</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://vuejs.org/js/vue.min.js"></script>
<style>
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}
</style>
</head>
<body>
<div class="test">
<p v-if = 'seen'>{{ message1 }}</p>
<p v-html = "message2" :class="class1"></p>
</div>
<script type="text/javascript">
new Vue({
el:'.test',
data:{
seen: true,
message1:'hello vue.js',
message2:'hey guys',
class1:{
'textColor':true,
'textSize':true,
}
}
})
</script>
</body>
</html>
Vue的一些模板语法:
v-bind
v-bind:class -> 缩写为 : class
v-bind在使用的时候大多数以在vue中的语句调用css的相关属性,如例
v-bind的基本用法
v-on
v-on的使用可以用@代替
message.split(”).reverse().join(”)
1.join()主要是将数组中的所有元素放入一个字符串,有指定分隔符单引号
2.reverse()是改变原来的数组,而不会创建新的数组,可以将数组倒序排列
3.可以将字符串按某个字符或者其他分割,返回数组
过滤器
过滤器的使用类似于 {{ message | capitalize }}后面跟的即是过滤器,过滤器的定义在vue中以类似于
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
的定义,联系到JavaScript中以function的形式进行操作
同时过滤器也可以串联
Vue的条件语句和循环语句
在Vue的使用中,条件语句和循环语句是和JavaScript极其类似的。不过是在语句的前面加上v-,内容语句写在两个双括号中,如果不懂的话建议还是回去再看看JavaScript