categories:
- vue基础
tags: - vue起步
目录
vue起步
引包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue起步和插值</title>
</head>
<body>
<div id="app">
<span>插入变量</span>
<h2>
{{ msg }}
</h2>
<span>插入数字</span>
<h3>
{{ 2 }}
</h3>
<span>插入字符串</span>
<h3>
{{ "hello" }}
</h3>
<span>插入对象</span>
<h3>
{{ {id:1} }}
</h3>
<span>插入表达式</span>
<h3>
{{ 1>2 ? '真':'假' }}
</h3>
<span>插入字符串并反转</span>
<h3>
{{ txt.split('').reverse().join('') }}
</h3>
<span>调用方法</span>
<h3>
{{ getContent() }}
</h3>
</div>
<!-- 1. 引包-->
<script src="./vue.js"></script>
<script>
//console.log(Vue)
// 2.初始化
const vm = new Vue({
el: '#app',
// 数据属性
data: {
msg: 'hello vue',
txt: 'hello',
msg2: 'content'
},
// 方法
methods: {
getContent(){
return this.msg + ' ' + this.msg2;
}
}
})
// vm整个实例，包含属性msg: (...) txt: (...) msg2: (...)
console.log(vm)
// vm.$data vm._data 相同
console.log(vm.$data)
console.log(vm._data)
console.log(vm._data.msg)
console.log(vm.msg)
</script>
</body>
</html>
启动 new Vue(options);
options
目的地 el
数据 data 保存数据属性
核心:数据驱动视图