关于引入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="我改变了原来的代码"

网页效果 ：

我改变了原来的代码

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

赞 (0)

相关推荐

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

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/

  • 关于引入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

  • vue组件内部引入外部js文件的方法

    vue组件内部引入外部js文件的方法

    之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第

  • vue引入静态js文件的方法

    由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在static文件下创建js.vue-cli 3.0 的写法则是直接在public文件夹下创建js. 具体操作如下: 1.在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器不能兼容的es6语法.因为该文件不进行编译,es6部分语法浏览器不兼容. 2..在html文件

  • uniapp引入模块化js文件和非模块化js文件的四种方式

    目录 方式1:引入普通的js文件,如user.js 1.1.属性和方法都写在一个变量内部 1.2.也可以单独写 方式2:把user.js放在入口文件main.js中,成为全局方法 方式3:引入第三方的模块化.js文件 方式4:uniapp开发的H5,引入第三方的非模块化.js文件 4.1.nomodule.js 4.2. 并在入口.html文件中引入全局js 4.3.在.vue页面中引用 方式1:引入普通的js文件,如user.js 1.1.属性和方法都写在一个变量内部 const user={

  • 在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js.test.html //a.js function abc(str){ alert(str); } //test.html <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript&

  • Vue如何引入远程JS文件

    问题 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案,分享之. 思路 一开始的思路是在 Vue 加载完 Dom 之后(mounted),使用 JavaScript 脚本在 body 中插入远程的脚本文件. 后来发现了 Vue 的 createElement 方法,简单的封装一个组件解决问题. 解决方法 第一版代码(直接在操作 Do

  • Vant的安装和配合引入Vue.js项目里的方法步骤

    1.安装vant npm i vant -S:这是简写形式. npm install vant --save:这是完整写法. 如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装. npm install vant --save --registry=https://registry.npm.taobao.org 淘宝镜像,速度快,安装后查看package.json文件里看是否安装完成 2.1使用babel-plugin-import(推荐) babel-plugin-impo

  • Vue.js中的extend绑定节点并显示的方法

    在使用Vue.js时,可以使用Vue.extend()方法创建一个子类,传入参数包含了一个对象.其中,在extend中的data和vue实例化对象中的data写法不一样.下面利用实例说明,操作如下: 第一步,创建一个静态页面并引入vue.js文件,并在主体元素标签中插入一个div,设置id属性,如下图所示: 第二步,在<script></script>标签中调用Vue.extend(),设置template和data,如下图所示: 第三步,使用new关键字调用$mount(),将创

  • vue.js中引入vuex储存接口数据及调用的详细流程

    vue.js中引入vuex储存接口数据及调用的详细流程

    前言 前几天在慕课网上看到黄轶老师的高仿饿了么app视频教程,在做接口设计的时候,我在想,这个接口能不能储存下来全局调用呢?而不是走很多次接口,管理起来也麻烦. 万能的vue果然有这个功能,那就是vuex. Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构.它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护.可理解的状态. 如果你不太理解 Vue.js 应用里的状态是什么意思的话,你可以想象一下你此前写的 Vue 组件里面的 data 字段.Vuex 把状态分

随机推荐