怎么直接引入vue.js?

vue的使用一般有两种方式:一种是使用脚手架工具vue-cli;二是直接在项目引入vue.js

直接在项目引入vue.js的方法

普通web项目中可嵌入vue使用,仅需将vue的js引入页面即可,例子如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
		<p id="app">
			
			{{msg}}}
			
		</p>
		
				
		<!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
        <!-- 生产环境版本,优化了尺寸和速度 -->
        <!--  <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
		
	</body>
	
	
	<script>
			new Vue({
		        el: '#app',
		        data: function () {
		            return {
		            	msg:"Hello world!"
		            }
		        }
		    });
	</script>
</html>

在普通web项目中,如果我们想自定义组件,按官方文档的写法如下:

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

但是此方法有一些不友好的地方,如果我们模板内容过大,则 template 内容会比较多,而且对代码整体的结构不太友好,因此我们希望通过新建.vue文件的形式来自定义组件。

http-vue-loader组件实现了不需要编译和build即可加载vue组件,具体使用方式如下:

1、创建自定义组件文件,如 my-component.vue ,内容如下:

<template>
    <p class="hello">{{msg}}</p>
</template>

<script>
module.exports = {
    data: function() {
        return {
            msg: 'Hello world!'
        }
    }
}
</script>

<style>
.hello {
    background-color: #ffe;
}
</style>

2、在网页上引入vue 和 http-vue-loader的js文件

<script src="js/vue.js"></script>
<script src="js/httpVueLoader.js"></script>

组件下载地址:https://download.csdn.net/download/ajian132/12054208 (可直接引入项目使用)

3、在网页上通过httpVueLoader载入子组件

<p id="app">
  <my-component></my-component>
</p>

<script type="text/javascript">
  new Vue({
    el: '#app',
    components: {
      'my-component': httpVueLoader('components/my-component.vue')
    }
  });
</script>

以上就是怎么直接引入vue.js?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏