关于引入vue.js 文件的知识点总结

更新时间：2020年01月28日 09:01:56 作者：灵灵7

在本篇文章里小编给大家分享的是关于引入vue.js 文件的知识点总结，有需要的朋友们可以参考学习下。

一、引入vue.js 文件

1. 用脚本标签<script> 引入外部vue.js 文件

<script src="http://9i0i.com/pic.php?p=https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 下面在一个新的 <script><script>标签里写vue 的代码

<script src="http://9i0i.com/pic.php?p=https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部文件-->
 
<script> //vue js 代码写在这里
 
var app=new Vue({
el:"#app",         //绑定的元素
data:{
   message:'Hello Vue' //元素内数据代码 message
}
});
 
//响应式。可修改数据
app.message="我改变了原来的代码"
 
</script>

二、格式：

1. 通过用 Vue 函数创建一个新的 Vue 实例

<script> 部分
 
var app=new Vue({
el:"#app",                            //绑定 id 为app 的元素
data:{
      message:'Hello Vue'   //元素内数据代号  message
}
});
</script>

双重大括号 {{ }} 内放置数据代号 message

<html>部分
 
<div v-once id="app">  
{{ message  }}                    // 双重大括号{{ }} 内放置数据代号message
</div>
 
</html>

网页效果：

Hello Vue

2. 响应式修改数据

可通过改变代号属性值，修改之前的数据

 
var app=new Vue({
el:"#app",         //绑定的元素
data:{
   message:'Hello Vue' //元素内数据代码 message
}
});
 
//响应式。可修改数据
app.message="我改变了原来的代码"

pp.message="我改变了原来的代码"

网页效果：

我改变了原来的代码

以上就是本次给大家分享的全部知识点内容，感谢大家的学习和对程序员之家的支持。

您可能感兴趣的文章:

vue.js引入外部CSS样式和外部JS文件的方法

vue.js学习笔记之v-bind和v-on解析
这篇文章主要介绍了vue.js学习笔记之v-bind和v-on解析，v-bind 指令用于响应地更新 HTML 特征，v-on 指令用于监听DOM事件，文中还给大家提到了v-bind,v-on的缩写，感兴趣的朋友参考下吧
2018-05-05
vuex中的state属性解析
这篇文章主要介绍了vuex中的state属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue3父子组件传参有关sync修饰符的用法详解
这篇文章主要给大家介绍关于前端Vue3父子组件传参有关sync修饰符的用法详细解析，有需要的朋友可以借鉴参考下，希望能够有所帮助
2021-09-09
解决VUE框架导致绑定事件的阻止冒泡失效问题
下面小编就为大家分享一篇vue监听滚动事件实现某元素吸顶或者固定位置显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue方法与事件处理器详解
这篇文章主要为大家详细介绍了Vue方法与事件处理器，,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
基于Vue.js与WordPress Rest API构建单页应用详解
这篇文章主要介绍了基于Vue.js与WordPress Rest API构建单页应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vue中使用render封装一个select组件
这篇文章主要介绍了vue中使用render封装一个select组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
去掉vue 中的代码规范检测两种方法(Eslint验证)
我们在使用vue 脚手架时，为了规范团队的代码格式，会有一个代码规范检测，如果不符合规范就会报错，有时候我们不想按照他的规范去写。这时我们需要关闭,这里程序员之家小编给大家带来了去掉vue 中的代码规范检测两种方法(Eslint验证)，一起看看吧
2018-03-03
Vue.js项目部署到服务器的详细步骤
这篇文章给大家介绍了Vue.js项目部署到服务器的详细步骤，既然是部署到服务器，肯定是需要一个云的。具体思路步骤大家可以参考下本文
2017-07-07
vue实现大文件分片上传与断点续传到七牛云
这篇文章介绍了vue实现大文件分片上传与断点续传到七牛云的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06