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

 更新时间:2020年01月28日 09:01:56   作者:灵灵7  
在本篇文章里小编给大家分享的是关于引入vue.js 文件的知识点总结,有需要的朋友们可以参考学习下。

一、引入vue.js 文件

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

<script src="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数组中对象属性变化页面不渲染问题

    解决vue数组中对象属性变化页面不渲染问题

    今天小编就为大家分享一篇解决vue数组中对象属性变化页面不渲染问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue实现网页转PDF方法流程详解

    Vue实现网页转PDF方法流程详解

    在日常的工作中,有时候会碰到需要将某个网址网页保存成为pdf的情况,这篇文章主要介绍了用Vue实现网页转PDF的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue 结合webpack的初级使用指南小白学习篇

    vue 结合webpack的初级使用指南小白学习篇

    这篇文章主要为大家介绍了vue 结合webpack的初级使用指南非常适合入门webpack的小白学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Vue.2.0.5实现Class 与 Style 绑定的实例

    Vue.2.0.5实现Class 与 Style 绑定的实例

    本篇文章主要介绍了Vue.2.0.5实现Class 与 Style 绑定的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 基于vue实现pdf预览功能

    基于vue实现pdf预览功能

    随着互联网的发展,PDF 文件在信息交流和文档分享中起着重要的作用,通过在 Vue 组件中实现 PDF 预览功能,我们可以为用户提供便捷的内容阅读体验,下面我们就来看看具体实现方法吧
    2023-08-08
  • vue.js动态数据绑定学习笔记

    vue.js动态数据绑定学习笔记

    这篇文章主要为大家详细介绍了vue.js动态数据绑定学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vxe-table vue table 表格组件功能

    vxe-table vue table 表格组件功能

    这篇文章主要介绍了vxe-table vue table 表格组件功能,功能非常强大,文中给大家提到了功能点,需要的朋友可以参考下
    2019-05-05
  • vue cookie和本地存储的使用详解

    vue cookie和本地存储的使用详解

    在Vue中,可以使用多种方式来处理cookie和本地存储,不同的方法还有不同的特点和适用场景,本文主要介绍了这些方法的对比和使用场景,希望对大家有所帮助
    2023-08-08
  • ElementUI嵌套页面及关联增删查改实现示例

    ElementUI嵌套页面及关联增删查改实现示例

    本文主要介绍了ElementUI嵌套页面及关联增删查改实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • VUE注册全局组件和局部组件过程解析

    VUE注册全局组件和局部组件过程解析

    这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10

最新评论