学习Vue基础的分享

meihuasheng

发布于 2021-03-16 20:54:33

22900

代码可运行

文章被收录于专栏：phpcodersphpcoders

运行总次数：0

代码可运行

Vue是一个前端框架，所以就有自己特定的语法，所以在这里列出学到的基础语法作用：基础模板参考

<html>
<head>
	<meta charset="UTF-8" />
	<title>Document</title>	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>	
</script>
</head>
<body>
	<div id="app">
		<!--<input type="text" v-on:input = "changeName" />-->
		<h1>{{testName()}}<a v-bind:href=" link ">baidu</a></h1>
	</div>
</body>
<script>
	new Vue({
	  el: '#app',
	  data: {
	  	name:"liusonging",
	  	link : "https://www.baidu.com"
	},
	methods:{
		testName(){
			return "liusonging"
		}
	}	
})
</script>
</html>

引入Vue文件，<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

做一个项目需要的东西有：开发服务器；Babel；postcss less sass;esLint(规范代码用的);

所以有了Web pack将所有的一键引入

Vue CLI3充当一个脚手架下载Vue CLI3的步骤

首先要先下载Nodejs 版本要大于8.9 然后就运行黑窗口用npm安装： npm install -g @vue/cli

vue create vue-test 创建项目

npm run serve 运行环境

vue ui 可以查看图形界面

最后vue具体语法看手册嘿嘿：vuejs.org

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/05/10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

npm