信息管理创新实践学习周记12

最新推荐文章于 2021-07-01 22:05:37 发布

小六不是路痴

最新推荐文章于 2021-07-01 22:05:37 发布

阅读量128

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/LCCCCCCHEN/article/details/118027517

版权

第十二周学习周记

学习内容
- 1.Vue.js 起步
- 2.Vue.js 模板语法

学习内容

本节课学习了一套构建用户界面的渐进式框架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>