前言：此笔记是根据狂神哔哩哔哩视频所写，转载请自动附上链接：狂神哔哩哔哩](https://space.bilibili.com/95256449)
开发工具：
下载官网：https://code.visualstudio.com/
开发Vue所用到的必要插件：
作用：语法高亮、智能感知、Emmet等
作用：纠正语法
作用：代码提示
作用：方便浏览器预览html文件
vue官网：https://cn.vuejs.org/（通过官网学习）
vue简介：是一个渐进式JavaScript框架，它是由能够实现基本功能的核心库和一些具有有专门功能的插件组成，而根据项目的复杂程度在原有的基本功能上通过逐步添加插件增加其他功能的框架。它是作者尤雨溪集结合了前端框架angular（模板和数据绑定技术）的和react（组件化和虚拟DOM技术）两者优点， 遵循MVVM模式的框架，称为Vue。
引入vue.js
新建01HelloWorld同级目录js（从官网下载）
将从官网上下载的vue.js文件复制到js下面
整体框架：
实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF_8"> <title>01HelloWorld</title> </head> <body> <div id="app"> <input type="text" v-model="username"> <P>Hello {{ username }}</P> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> //创建Vue实例 const vm = new Vue({//配置对象 el: '#app', //element：选择器 data: { //数据（model） username: 'Hello Vue!' } }) </script> </body> </html>在html代码中鼠标右键可以看到多了两个打开选择，点击选项即可打开浏览器进行预览
Open in Default Browsers：使用默认浏览器打开 快捷键：alt+b
Open in Other Browsers：使用其他浏览器打开 快捷键：alt+shift+b
效果图片：
在文本框里操作
在控制台操作（打开浏览器，查看元素里面）
补充：
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
绑定元素属性的2种方法：
{{ msg}}
<div id="app"> <P>{{ msg }}</P> </div>v-bind（以v开头的称为指令）
<div id="app"> <P v-bind:title="msg"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </P> </div>共同部分
<script> //创建vue实例 const vm = new Vue({ el: '#app',//element:选择器 data: { //数据(model) msg: 'Hello,Vue!' } }); </script>效果图
{{ msg}} (直接查看)
v-bind （间接查看）
判断-循环
v-if (写在开放标签里面)
实现代码
<div id="app"> <P v-if="msg==='a'">A</P> <P v-else-if="msg==='b'">B</P> <P v-else>C</P> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> //创建vue实例 const vm = new Vue({ el: '#app',//element:选择器 data: { //数据(model) msg: 'a' } }) </script>效果图
v-for （写在开放标签里面）
实现代码：
<body> <div id="app"> <li v-for="item in items"> {{item.msg}} </li> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> //创建vue实例 let vm = new Vue({ el: "#app", //element:选择器 data: { items: [ //[]数组，{}对象 {msg: 'uxiang'}, {msg: 'oxiang'}, {msg: 'uyi'} ] } }); </script>效果图：
补充说明：
item in items :items绑定的data里面的items。指的是从（in）数组items中遍历出每一项item，item.msg是指查看每一项的内容。
如果要显示当前索引，可写成如下： ```html div id="app"> <li v-for="(item,index) in items"> {{item.msg}}-{{index}} </li> </div>效果图：
监听事件
v-on
代码实现：
<div id="app"> <button v-on:click="sayHi">click me</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> //创建vue实例 let vm = new Vue({ el: "#app" ,//element:选择器 data: { msg: "Welcome to Vue's world!" }, methods: { sayHi:function(){ alert(this.msg); } } }); </script>效果图：点击button（click me）就会弹出“Welcome to Vue’s world!”
补充说明：
methods: //方法必须定义在Vue的Methods对象中，v-on:事件vue的7个属性（https://blog.csdn.net/chenxuezhong0413/article/details/106593629）
el属性： 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。 data属性： 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。 template属性： 用来设置模板，会替换页面元素，包括占位符。 methods属性： 放置页面中的业务逻辑，js方法一般都放置在methods中 render属性： 创建真正的Virtual Dom computed属性： 用来计算 Vue.js 计算属性，计算属性在处理一些复杂逻辑时是很有用的 watch属性： Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化 watch:function(new,old){} 监听data中数据的变化 两个参数，一个返回新值，一个返回旧值。