Vue_0.1 基础插值使用
<!DOCTYPE html>
<html lang="zh.CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue的起步和插值</title>
</head>
<body>
<!-- 07 基础使用 -->
<div id='app'>
<h2>{{msg}}</h2>
<h3>{{2}}</h3>
<h4>{{msg2}}</h4>
<h4>{{txt}}</h4>
<h4>{{msg3}}</h4>
<h1>{{getContent()}}</h1>
</div>
<!-- 01 引入Vue -->
<script src="../Vue基础/vue.js"></script>
<script>
// 02 Vue对象实例化
const vm = new Vue({
// 03 绑定html
el:'#app',
// 04 数据
data:{
msg:'hello vue',
txt:'hello, world',
msg2:'content',
msg3:'<p>插值语法</p>'
},
// 05 方法
methods:{
getContent(){
return this.msg + ' ' + this.msg2;
}
}
});
// 06 基础调试
console.log(vm.msg);
</script>
</body>
</html>
版权声明:除特别注明外,本站所有文章均为王晨曦个人站点原创
转载请注明:出处来自王晨曦个人站点 » Vue_0.1 基础插值使用