关于引入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 相关文章推荐
三级下拉菜单的js实现代码
May 23 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
js 调用百度分享功能
Feb 27 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 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
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python学习资料
2007/02/08 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python数据结构之链表的实例讲解
2017/07/25 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python多继承原理与用法示例
2018/08/23 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
自我评价的写作规则
2014/01/06 职场文书
廉洁教育学习材料
2014/05/19 职场文书
校园安全广播稿范文
2014/09/25 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
2015年药店店长工作总结
2015/04/29 职场文书