一、Vue概述

  • Vue.js是前端三大新框架之一（Angular.js、React.js、Vue.js）
  • Vue.js读音 /vjuː/, 类似于 view
  • Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API
  • Vue.js是一个构建数据驱动的Web界面的库
  • Vue.js是一套构建用户界面的渐进式框架
  • Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统
  • Vue.js框架的作者是尤雨溪，他认为未来App的趋势是轻量化和细化，能解决问题的应用就是好应用

二、创建Vue实例

  • 官方提供了两个包：开发环境版本和生产环境版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
		<!-- 导包 -->
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 采用模板语法来声明式地将数据渲染进 DOM 的系统 -->
<div id="app">
  {{ message }}
</div>
</body>
<!-- 创建Vue实例 -->
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</html>

三、绑定数据 data

  • 数据绑定最常见的形式就是使用“Mustache(胡子)”语法（双大括号）的文本插值：{{ message }}
  • Mustache标签将会被替代为对应数据对象上message属性的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<!-- 采用模板语法来声明式地将数据渲染进 DOM 的系统 -->
<div id="app">
  {{ message }}
</div>
</body>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
  • 可以通过开发者工具进行调试，来修改Mustache标签：app.$data.message='值'
  • 可以通过改变Vue的分隔符，来修改Mustache标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<!-- 采用模板语法来声明式地将数据渲染进 DOM 的系统 -->
<div id="app">
  [[ message ]]
</div>
</body>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  delimiters:['[[',']]'],
  data: {
    message: 'Hello Vue!'
  }
})
</script>

四、绑定元素属性 v-bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<div id="app">
  <span>{{ message }}</span> <br>
   <span v-bind:title="ads">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> <br>
   <a v-bind:href="home" target="_blank">戳我有惊喜</a>
</div>
</body>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    ads:'页面加载于 ' + new Date().toLocaleString(),
    home:'http://www.itcast.cn/'
  }
})
</script>

v-bind简写：

五、条件渲染 if

  • 通过条件指令可以控制元素的创建（显示）或者销毁（隐藏）

    • v-if：当标记为false，标签不会添加在DOM，也不显示
      • v-if
      • v-else-if
      • v-else
    • v-show：当标记为false，标签会添加在DOM，但不显示
      • 不支持v-else
      • 使用时，原本的CSS代码不能设置display属性，会导致冲突
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<body>
<div id="app">
  <span>{{ message }}</span> <br>
   <span :title="ads">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> <br>
   <a :href="home" target="_blank" title="惊喜">戳我有惊喜</a> <br>  
   <p v-if="seen">现在你看到我了</p>
</div>
</body>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    ads:'页面加载于 ' + new Date().toLocaleString(),
    home:'http://www.itcast.cn/',
    seen:true,
  }
})
</script>
<img src="" alt="皇帝" v-if="level === 1">
<img src="" alt="皇亲" v-else-if="level === 2">
<img src="" alt="国戚" v-else-if="level === 3">
<img src="" alt="大臣" v-else>
<body>
<div id="app">
   <p v-if="seen" id="if">现在你看到我了</p>
   <p v-show="seen" id="show">现在你看到我了</p>
</div>
</body>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    seen:false
  }
})
</script>

六、列表渲染 for

  • v-for指令可以绑定数组的数据来渲染一个项目列表
  • v-for指令需要使用item in items形式的特殊语法
  • v-for指令的index从0开始
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<ol>
<!--   v-for指令的index从0开始 -->
  <li v-for="(todo,index) in todos">
    {{ todo.text }}-{{index}}
  </li>
</ol>
<body>
<div id="app">
  <ul>
    <li v-for="value in object">
      {{ value }}
    </li>
  </ul>
</div>
</body>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
</script>
<body>
<div id="app">
   <ul>
    <li v-for="item in items">
      {{ item.title }}~~~{{item.author}}~~~{{item.publishedAt}}
    </li>
  </ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    items: [
       {
        title: 'Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      },
      {
        title: 'python',
        author: 'Ricky',
        publishedAt: '2019-04-10'
      },
      {
        title: 'itcast',
        author: 'itcast',
        publishedAt: '2006-05-08'
      }
    ]
  }
})
</script>

七、事件绑定 v-on

  • 可以用v-on指令监听DOM事件，并在触发时运行一些 JavaScript 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<div id="app">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
</body>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    counter:0
  }
})
</script>
  • v-on还可以接收一个需要调用的方法名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
<div id="app">
  <button v-on:click="add">Add 1</button>
</div>
</body>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    counter:0
  },
  methods:{
    add:function(){
      counter+=1
      alert(this.counter)
    }
  }
})
</script>
<body>
<div id="app">
  <button v-on:click="addnum(counter)">Add {{counter}}</button> 
</div>
</body>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    counter:1
  },
  methods:{
    addnum:function(num){
      this.counter = num+this.counter
      alert(this.counter)
    }
  }
})
</script>
  • v-on简写：@

八、表单绑定 model

九、Todolist案例

十、ES6语法

十一、Vue实例生命周期

十二、axios发送ajaxs请求

附录-参考资料

Vue.js官方文档

https://vuejs.org/guide/introduction.html#api-styles

Vue.js可视化学习网站：scrimba

https://scrimba.com/playlist/pXKqta