三天精通Vue--Vue的常用语法 Vue的介绍

官网教程:https://cn.vuejs.org/v2/guide/installation.html

cdn(在线的网络连接资源):https://www.bootcdn.cn/

1,Vue的简介

　　Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(指的是前端页面,即MTV中的T—>template模板)。

2,vue&react&angular对比

vue是江苏无锡⼈尤⾬溪带头发明的前端轻量级的框架。目前 vue的版本是2.6.10

react是Facebook公司发明的框架，目前react的版本是 react16

angular是谷歌公司发明的框架，目前angular是6.0版本

3,下载&库引入

　　Vue.js类似于jQuery.js,是一个库,在HTML文档中直接使用script引入就能使用了.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

　　引入之后,将该HTML文档使用浏览器打开,鼠标右键"检查",选择Console,输入Vue,显示页面上定义了一个Vue函数.　　

>> Vue
<< ƒ Vue (options) {
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }

　　使用的时候需要先新建一个Vue实例,数据(创建Vue实例的参数中找)驱动视图(标签).下面是一个完整的HTML文件的栗子:

<!DOCTYPE html>
<html lang="en">
  
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible"content="ie=edge"> 
  	<title>Document</title>
 
</head>
  
<body>
　　<div >
      	<!--视图-->
	<!-- 模板语法插值: {{ }}表示插值语法 -->
        <h3>{{ msg }}</h3>
   </div>
<!-- 1.引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript"> 
      //实例化Vue
      	let vm = new Vue({
		el: '#app', //绑定根元素,使用标签选择器,这里是ID选择器 
          	data: {//数据属性
			msg:'alex是个⼤大SB',//声明数据属性
            　　}
	})
</script>

</body>
</html>

4,模板语法介绍

　　Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。用大白话来说就是Vue中的数据属性使用模板语法来渲染。

<!--模板语法:注意前后都要加空格-->
<h1>{{ 变量 }}</h1>
<h1>{{ 1+1 }}</h1>
<h1>{{ 'hello' }}</h1>
<h1>{{ 函数的调用 }}</h1>
<h1>{{ {name:'alex'} }}</h1>  备注:对象
<h1>{{ 1==1?'真的':'假的' }}</h1>  备注:三元运算

5,指令系统介绍

v-text&v-html

v-text类似于双大括号,会将数据解释为普通文本—>只渲染文本

v-html输出HTML 代码—>既渲染文本又渲染标签

<body>
　　 <div >
      	<!--视图-->
	<!-- 模板语法插值: {{ }}表示插值语法 -->
        <h3>{{ msg }}</h3>
      	<!--等效于innerText  innerHTML text() html()-->
        <h4 v-text = "name"></h4>
        <h4 v-html = "name"></h4>
    </div>
<!-- 1.引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript"> 
      	let vm = new Vue({
		el: '#app', //绑定根元素,使用标签选择器,这里是ID选择器 
          	//数据 属性
          	data: {
			msg:'alex是个⼤大SB',//声明数据属性
              	　　　　 name:'<span>黄瓜</span>',
                }
	})
</script>

</body>

v-if&v-show

　　v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

　　v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

<!DOCTYPE html>
<html lang="en">
  
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible"content="ie=edge"> 
  	<title>Document</title>
  	<style>
      　　　　.box{
   　　　　　　　　 200px;
            　　 height: 200px;
　　　　　　　　　 background-color: red;
		margin-bottom: 10px;
             }
       </style>

 
</head>
  
<body>
　　<div >
	<div class="box" v-if='isShow'></div>
	<div class="box" v-show='isShow'></div> 
　　</div>

<!-- 1.引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript"> 
      	let vm = new Vue({
		el: '#app', //绑定根元素,使用标签选择器,这里是ID选择器 
          	//数据 属性
          	data: {
			isShow:true
                }
				
　　　　})
</script>

</body>

</html>

　　页面显示效果如下:

三天精通Vue--Vue的常用语法
Vue的介绍

如果将变量isShow改为false。

三天精通Vue--Vue的常用语法
Vue的介绍

总结v-if vs v-show:

　　v-if对当前元素创建/销毁;v-show对当前元素显示/隐藏.

　　v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

　　v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　　相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

　　一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for

v-for遍历数组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul >
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul >
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

Parent - 0 - Foo
Parent - 1 - Bar

你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

在 v-for 里使用对象

你也可以用 v-for 来遍历一个对象的属性。

<ul >
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果：

How to do lists in Vue
Jane Doe
2016-04-10

你也可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value, name) in object">
   {{ name }}: {{ value }}
 </div>

结果:

title: How to do lists in Vue

author: Jane Doe

publishedAt: 2016-04-10

还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

结果: