目标：使用vue.js实现页面按钮点击事件调用自定义的function
学习vue.js语法、编程思想
vscode工具安装使用
一、百度“vue 按钮点击事件”教程
vue官网材料
https://cn.vuejs.org/v2/guide/events.html
百度案例教程
jingyan.baidu.com/article/ca0…
扩展：vue教程材料
二、原生的dom操作，绑定事件的处理方式：
1、使用dom获取节点元素，再绑定点击事件
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>2、使用onclick属性关联
<input type = "button" value="this is a button" onclick="querydata()">
<script type="text/javascrpt">
function querydata() {
alert("我是弹出的内容");
}
</script>三、使用vue.js实现按钮点击事件绑定
<div id="localapp">
<p/>
<button v-on:click="vuefunction('button input parameter')">vue click button</button>
<!--语法糖-->
<button @click="vuefunction('button input parameter')">vue click button</button>
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue ({
el: '#localapp',
methods:{
vuefunction : function(msg01){
alert(msg01);
}
}
})
</script>
报错：VM9 vue.js:634 [Vue warn]: Cannot find element: #localapp
注意：页面元素写在js脚本之前
四、关联基础内容补充（js中的dom操作引申）
什么是dom，使用vue.js之前如何操作
1、文档对象模型DOM
2、渲染
3、ECMAScript
4、JavaScript的组成：ECMAScrip+DOM（文档对象模型）+BOM（浏览器对象模型）
JavaScript基础：ECMAScrip；
Web APIs：DOM（文档对象模型）+BOM（浏览器对象模型）
DOM用来操作页面内容；
BOM用来操作浏览器窗口。
Web API：浏览器提供的操作浏览器功能和页面元素的API（BOM和DOM）
BOM：浏览器对象模型，提供独立于内容，与浏览器窗口进行交互的对象，其中核心对象是window。例如新建浏览器窗口、关闭浏览器窗口等。
https://www.bilibili.com/video/av57708010?p=77
什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言（xml：sgml和HTML）的标准编程接口。
通过DOM接口可以改变 网页的内容、结构和样式。
DOM是一种用来处理xml（HTML）的基于树的API。（js和java中的具体接口实现）
小结：DOM是一套标准，DOM 是具体的接口实现。实际操作中即指API实现。
DOM树：
文档：一个页面就是一个文档，DOM中使用document表示；
元素：页面中，所有的标签都是元素，DOM中使用element表示；
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中用node表示。
DOM把以上内容都看做是对象。
所以叫作文档对象模型
渲染：浏览器显示请求的内容，即浏览器解析获取到的HTML、CSS等内容，显示到窗口。
https://blog.csdn.net/csdnnews/article/details/95267307
https://segmentfault.com/a/1190000014018604
https://www.zhihu.com/question/34219998
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。
https://www.w3cschool.cn/ecmascript/
参考资料：
jingyan.baidu.com/article/ca0…
https://blog.csdn.net/csdnnews/article/details/95267307
https://segmentfault.com/a/1190000014018604
https://www.zhihu.com/question/34219998
https://www.w3cschool.cn/ecmascript/
