关于引入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操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
js实现随机点名
Jan 19 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
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 socket方式提交的post详解
2008/07/19 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
Python单链表简单实现代码
2016/04/27 Python
Python简单的制作图片验证码实例
2017/05/31 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
Python中生成ndarray实例讲解
2021/02/22 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
庆七一活动总结
2014/08/27 职场文书
农村文化活动总结
2014/08/28 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js