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


Posted in Javascript onJanuary 28, 2020

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

网页效果 :

我改变了原来的代码

以上就是本次给大家分享的全部知识点内容,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
微信小程序 navbar实例详解
May 11 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
javascript如何实现create方法
Nov 04 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
JS简单表单验证功能完整示例
Jan 26 #Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 #Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 #Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 #Javascript
详解Vue的ref特性的使用
Jan 24 #Javascript
JavaScript对象原型链原理解析
Jan 22 #Javascript
Node.js学习之内置模块fs用法示例
Jan 22 #Javascript
You might like
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP加密解密函数详解
2015/10/28 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
JS分页效果示例
2013/10/11 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python小进度条显示代码
2019/03/05 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
Ruby如何定义一个类
2012/10/08 面试题
幼儿园托班开学寄语
2014/01/18 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
干部培训工作总结2015
2015/05/25 职场文书
护理工作心得体会
2016/01/22 职场文书
聘任书的格式及模板
2019/10/28 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python