1、vscode 安装 open in browser 插件
安装完成后在html页面上点击右键就可以选择浏览器打开了。
2、看一个简单例子
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
什么意思呢，就是vue自动将数据和 DOM 建立了关联，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。
3、定义参数 在一个vue中的data中定义参数集合。支持json 格式
var app = new Vue({ el: '#app', //dom的唯一标志 data: { //参数集合 message: 'Hello Vue!' } })
4、定义方法 在一个vue中的methods 中定义方法
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { //定义方法 myFun: function () { alert('Hello Vue!') } } })
5、vue 提供了一些生命周期钩子函数
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, beforeCreate: function(){ //创建前执行 console.log('beforeCreate') }, created: function(){ //创建后执行 console.log('created') },
所有的函数可以点击图片查看 钩子函数图片
以上就是基础的一些定义了。