第十二周学习周记
学习内容
本节课学习了一套构建用户界面的渐进式框架Vue.js
1.Vue.js 起步
知识点：
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({
// 选项
})
Vue 构造器中需要的内容实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
})
</script>
</body>
</html>
可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
data 用于定义属性，上述实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
2.Vue.js 模板语法
知识点：
文本：
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值
Html：
使用 v-html 指令用于输出 html 代码
属性：
HTML 属性中的值应使用 v-bind 指令
表达式：
Vue.js 都提供了完全的 JavaScript 表达式支持
指令：
指令是带有 v- 前缀的特殊属性
参数：
参数在指令后以冒号指明
修饰符：
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
用户输入——使用 v-model 指令来实现双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: '请输入!'
}
})
</script>
</body>
</html>
过滤器——对输入的字符串第一个字母转为大写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'luchen'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
</body>
</html>
可以实现将luchen转换成Luchen