Vue.js快速入门与安装-优快云博客

本文链接：https://blog.youkuaiyun.com/Aizhq/article/details/105811070

vue.js的安装

1.直接从csdn 安装引入

下面展示一些 内联代码片。

// An highlighted block

对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

2.下载（一般都用开发版本）
开发版本: Vue.js(开发版本：包含完整的警告和调试模式).
生产版本: Vue.js(生产版本：删除了警告，33.30KB min+gzip）.
3.NPM安装（初学者慎用）

$ npm install vue

vue.js初体验

<div id="app">
    <h2>{{message}}</h2>
    <h2>{{name}}</h2>
</div>


<script>
    // let(变量)/const(常量)
    const app = new Vue({
        el:'#app', //挂载元素
        data:{  //定义变量
            message:'vue初体验',
            name:'哈哈'
        }
    })
</script>

在这里插入图片描述

列表显示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>

		<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
		<!-- 	<img v-bind:src="imgURL" alt="">
			<a v-bind:href="ahref">百度一下</a> -->
			<h1>{{ message }}，aa </h1>
		<!-- 	<h1 v-pre>{{message}}</h1> -->
	<!-- 		<h1 v-text="message">你好</h1> -->
			<h2>{{name}}</h2>
			<!-- <h1 v-html='url'></h1> -->
			<!-- <h2>当前计数：{{counter}}</h2> -->
			<!-- <h3>{{firstName + ' ' + lastName}}</h3> -->
			<!-- <h2>{{counter+2}}</h2> -->
		<!-- 	<button type="button" @click="add">+</button>
			<button @click="sub">-</button> -->
			<ul>
				<li v-for="ass in movies">{{ass}}</li>
			</ul>
		</div>

		<script>
			new Vue()
			var app = new Vue({
				el: '#app',
				// el:document.querySelector(),
				data: {
					message: 'vue初体验',
					name: '哈哈',
					// firstName: 'copy',
					// lastName: 'se',
					movies: ['海王', '威江吕'],
					// counter: 0,
					// url: '<a href="http://www.baidu.com">百度一下</a>',
					// ahref: "http://www.baidu.com",
					// imgURL: "https://img10.360buyimg.com/mobilecms/s280x280_jfs/t1/118966/3/2174/202115/5e9fb70fEb00d4174/1505096d72c2ffd6.jpg.webp"
				},
				// methods: {
				// 	add: function() {
				// 		console.log('add被执行')
				// 		this.counter++
				// 	},
				// 	sub: function() {
				// 		console.log(123)
				// 		this.counter--
				// 	}
				// },

			})
		</script>
	</body>
</html>

在这里插入图片描述