网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

学习周记12

2021/6/28 3:36:11 人评论

Vue初步Vue.js 起步Vue.js 模板语法1.插值2.HtmlVue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式 var vm new Vue({// 选项 })实例 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>Vue 测试实例 - …

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.csdn.net/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>

结果
在这里插入图片描述

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?