Vue前端

時間 2020-12-11

標籤 javascript html 前端 vue java npm app 學習 .net 3d 欄目 JavaScript 简体版

原文原文鏈接

1、Vue入門javascript

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"><>html

// 下載vue.js後在項目內引入
< src="js/vue.js"><>
注：<>標識爲script標籤前端

入門實例：vue

<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>

2、v-xxx指令的使用java