Vue前端

一、Vue入门

vue官网：https://cn.vuejs.org/
在做前端编辑时要应用vue.js：
vue.js得下载: 进官网---> 点击学习，点击教程---> 找到起步->看到安装点击进入、下滑找到开发和生产版本，点击即可下载vue.js ，提示：我这下的是开发版的
// 使用标签script 以CDN的方式引入vue.js --- 有外网时使用
< src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><>

// 下载vue.js后在项目内引入
< src="js/vue.js"><>
注：<>标识为script标签

入门实例：

  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>

<!-- 以CDN的方式引入vue.js 有外网时使用  -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

<!-- 下载vue.js后在项目内引入 -->
<script src="js/vue.js"></script>

<!-- 2.创建一个DIV元素 -->
<div id="app">
	app - {{ msg }}  <!-- 插值表达式，Vue实力会自动渲染数据到页面 -->
	
	<p>年龄 ：{{ age }}</p>
</div>

<!-- <div id="abc">
	abc - {{ msg }}
</div> -->

<script type="text/javascript">
	var vm = new Vue({ // 3.创建一个Vue实例  控制页面的某个区域
		el: '#app', // 挂载点，指明Vue实例要操作那个元素
		data:{ // Vue实例中的数据
			msg: '你好，Vue',
			age: 18
		}
	})
</script>
  </body>

二、v-xxx指令的使用