Vue入门

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>