Vue.js入门与模板语法-优快云博客

本文链接：https://blog.youkuaiyun.com/Ddddd_xr/article/details/118286387

Vue初步

Vue.js 起步
Vue.js 模板语法
- 1.插值
- 2.Html

Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式

var vm = new Vue({
  // 选项
})

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/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: "https://blog.youkuaiyun.com/Ddddd_xr?spm=1001.2101.3001.5343",
				alexa: "1000"
			},
			methods: {
				details: function() {
					return  this.site + " - 记录学习历程";
				}
			}
		})
	</script>
</body>
</html>

在这里插入图片描述
上述实例中：
Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
id 为 vue_det，在 div 元素中：< div id = “vue_det”>< /div>
后面的改动全部在以上指定的 div 内，div 外部不受影响。
如何定义数据对象
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

Vue.js 模板语法

1.插值

文本
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：
< div id=“app”>
< p>{{ message }}< /p>
</ div>

2.Html

使用 v-html 指令用于输出 html 代码：
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Vue的模板语句</h1>'
  }
})
</script>
</body>
</html>

结果
在这里插入图片描述