关于引入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 相关文章推荐
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
小程序实现搜索框
Jun 19 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常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
django 消息框架 message使用详解
2019/07/22 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
Python 日期与时间转换的方法
2020/08/01 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
新文化运动的口号
2014/06/21 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
长城英文导游词
2015/01/30 职场文书
会计工作态度自我评价
2015/03/06 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python