1、引入
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2、声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
<div id="app">
{{ message }}
姓名:{{user.name}}
{{school[0]}}
</div>
var app = new Vue({
el: '#app', //作用范围,推荐使用id选择器,不能指向body
data: { //数据
message: 'Hello Vue!',
user:{name:"小陈",des:"在河大等你"},
school:["明伦校区","金明校区","龙子湖校区"]
}
})
3、v-text和v-html
// 除了{{ }} 能获取vue的值,v-text 和 v-html也能获取vue中的数据
<div id="app">
// {{}}和v-text两者作用相同,区别
// 1、使用使用{{}} 取值不会将标签元素数据覆盖
// 2、v-text获取数据时不会出行插值闪烁{{属性名}} 插值表达式:容易出行插值闪烁,在网络不好的时候会出现
<h2>{{ msg }}</h2>
<h2 v-text="msg"></h2>
<h2 v-html="msg"></h2>
//v-text和v-html
//1、相同点:都可以直接根据data中的数据名,将数据渲染到标签内部
//2、v-text:直接将获取数据以文本形式渲染到标签内部
//3、v-html:将获取数据中含有html标签解析后渲染到标签内部
</div>