1.下载并且引入Vue文件
从Vue官网上下载vue文件,分别为vue.js
、vue.min.js
。前者开发使用后者应用发布使用。
2.引入vue.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js" ></script>
</head>
<body>
</body>
</html>
3.创建vue实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js" ></script>
</head>
<body>
<div id="app"></div>
<script>
//创建实例
const myvue = new Vue({
template:'<h1>hello my frist vue</h1>'
})
</script>
</body>
</html>
4.vue实例挂载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js" ></script>
</head>
<body>
<div id="app"></div>
<script>
//创建实例
const myvue = new Vue({
template:'<h1>hello my frist vue</h1>'
})
//挂载
myvue.$mount('#app')
</script>
</body>
</html>
代码解释:
- Vue和Jquery一样,当你引入Vue时,就意味着注册了一个全局变量Vue。
- vue的构造方法参数是一个option配置对象,对象中含有大量的vue预定义设置,每一个都是key:value的形式,常见的一些选项有:
- el: (Element or string) 定义 Vue 实例将挂载到哪个 DOM 元素上。
- data: (Object) 包含初始数据,这些数据可以被 Vue 实例在模板中使用。
- computed: (Object) 定义计算属性,这些属性基于其他数据动态计算得出。
- methods: (Object) 包含可复用的方法,这些方法可以在 Vue 实例中调用。
- watch: (Object) 监听数据的变化并执行相应的回调。
- template: (string or function) 定义组件的 HTML 模板。
- components: (Object) 注册局部组件,这些组件只在当前 Vue 实例中可用。
- props: (Array or Object) 定义接收父组件传递过来的数据的属性。
- created(): (Function) 当 Vue 实例创建完成,数据观测及事件配置已经完成时调用。
- mounted(): (Function) 当 Vue 实例挂载完成后调用。
- template 配置项: value 是一个模板字符串。 在这里编写符合 Vue 语法规则的代码(Vue 有一套自己规定的语法规则) 。 写在这里的字符串会被 Vue 编译器进行编译, 将其转换成浏览器能够识别的 HTML 代码。 template称之为模板
- Vue 实例的$mount 方法: 这个方法完成挂载动作, 将 Vue 实例挂载到指定位置。 也就是说将 Vue 编译后的HTML 代码渲染到页面的指定位置。 注意: 指定位置的元素被替换。
- ‘#app’的语法类似于 CSS 中的 id 选择器语法。 表示将 Vue 实例挂载到 id=’app’的元素位置。 当然, 如果编写原生 JS 也是可以的: vm.$mount(document.getElementById(‘app’))。
- ‘#app’是 id 选择器, 也可以使用其它选择器, 例如类选择器: ’.app’。 类选择器可以匹配多个元素(位置) ,这个时候 Vue 只会选择第一个位置进行挂载(从上到下第一个)
7.{{}}是插值语法,{{}}中可以放的东西如下:
- 1.在data中声明的变量、函数
- 2.常量都可以
- 3.合法的javascript表达式
- 4.能访问全局变量白名单 ,如Date和Math这些