关于引入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 单选框,多选框美化代码
Aug 01 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
微信小程序排坑指南详解
May 23 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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&amp;&amp;mysql)六
2006/10/09 PHP
PHP脚本的10个技巧(1)
2006/10/09 PHP
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中subprocess的简单使用示例
2015/07/28 Python
Python解析树及树的遍历
2016/02/03 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
python构建自定义回调函数详解
2017/06/20 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
详解Python做一个名片管理系统
2019/03/14 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
日语专业推荐信
2013/11/12 职场文书
质检员岗位职责
2013/12/17 职场文书
上班迟到检讨书
2014/01/10 职场文书
公益广告语集锦
2014/03/13 职场文书
四年级评语大全
2014/04/21 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Python中for后接else的语法使用
2021/05/18 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android