关于引入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替换table中的内容并显示进度条的代码
Aug 02 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
js播放wav文件(源码)
Apr 22 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
浅析Vue 生命周期
Jun 21 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
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
极典R601SW收音机
2021/03/02 无线电
PHP令牌 Token改进版
2008/07/18 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
php intval函数用法总结
2019/04/14 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
jqgrid 简单学习笔记
2011/05/03 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
详解vue中axios的封装
2018/07/18 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
python测试mysql写入性能完整实例
2018/01/18 Python
python中的闭包函数
2018/02/09 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Django的models模型的具体使用
2019/07/15 Python
Python新手学习标准库模块命名
2020/05/29 Python
Python requests接口测试实现代码
2020/09/08 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
在校证明模板
2015/06/17 职场文书
2016特色励志班级口号
2015/12/24 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
nginx请求限制配置方法
2021/07/09 Servers