Vue 知识整理—02-起步

时间:2022-02-28 13:25:17

一:Vue 语法格式:

    vue vm = new Vue({
    //选项
  })

二:Vue 实例:

<div id="app">
<p>{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
{message}
},
methods: {
details: function() {
''
}
}
})
</script>

三:Vue 选项(el  data  methods):

1.  el 

  ☞ 作用:指定管理的视图区域

  ☞ 指定方式:通过选择器或者 DOM 对象

  注意:不能指定<body>和<html> 标签作为视图,因为<script>包含在<body>和<html> 标签中

2.  data

  ☞  作用:指定 vm 中的响应数据

  ☞  注意:数据的使用需要提前声明

3.  methods

  ☞  作用:定义函数,提供给 vm 实例去使用

  ☞  注意:fn ( ) { } 是推荐写法,等同于普通函数 function  fn ( ) { }

    不推荐使用箭头函数,因为箭头函数中没有 this ,可以理解为它的上一级,也就是说 this 的指向取决于定义它的位置

  ☞  函数中的 this 就是 vm 实例

四:Vue 相关术语---模板语法:

1. 插值表达式:

  

2. 属性:

3. 表达式:

4. 指令:

5. 参数:

6. 修饰符

7. 用户输入:

8. 过滤器:

9. 缩写: