自学Vue.js第二天

自学Vue.js第二天

Vue中的MVVM：

https://zh.wikipedia.org/wiki/MVVM

• View层：
• 视图层
• 在我们前端开发中，通常就是DOM层
• 主要的作用是给用户展示各种信息。
• Model层
  • 数据层
  • 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据
  • 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
• VueModel层：
  • 视图模型层
  • 视图模型层是View和Model沟通的桥梁
  • 一方面它实现了Data Bingding ，也就是数据绑定，将Model的改变实时的反应带View中
  • 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚蛋、touch等）时，可以监听到，并在需要的情况下改变对应的Data.

创建Vue实例传入的options

• options中可以包含哪些选项：
  • 详细解析：https://cn.vuejs.org/v2/api/#%E9%80%%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
• 目前掌握的选项：
  • el：
    • 类型：string | HTMLElemrnt
    • 作用：决定之后Vue实例会管理哪一个DOM.
  • data:
    • 类型：Object | Function（组件的当中data必须是一个函数）
    • 作用：Vue实例对应的数据对象
  • methods:
    • 类型：{[key:string]:Function}
    • 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

插值操作

如何将date中的文本数据，插入到HYML中？

​ 通过Mustache 语法（也就是双大括号）。

<div id="app">
	<h2>{{message}}</h2>
	<h2>{{message}},世界</h2>
   	<!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
	<h2>{{firstName + lastName}}</h2>
	<h2>{{firstName + " " +lastName}}</h2>
	<h2>{{firstName}} {{lastName}}</h2>
	<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
        el:"#app",
        data:{
            message:'你好啊',
            firstName:'kobe',
            lastName:'bruant'
            counter:100
        }
    })
	</script>

v-once 语法

• 该指令后面不需要跟任何表达式（比如之前的v-for后面是由跟表达式的）
• 该指令表示元素的组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变。

<div id = "app">
	<h2>{{message}}</h2>
	<h2 v-once>{{message}}</h2> 
</div>

v-html

• 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
  • 如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
  • 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容
• 如果我们希望解析出HTML展示
  • 可以使用v-html指令
    • 该指令后面往往会跟上一个string类型
    • 会将string的html解析出来并且进行渲染

<div id = "app">
	<h2>{{url}} </h2>
    <h2 v-html = 'url'></h2>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'你好啊',
			url:'<a href="htpp://www.baidu.com">百度一下</a>'
		}
	})

v-text

• v-text作用和Mustache比较相似：都是用于将书显示在界面中
• v-text通常情况下，结束一个string类型,
• 没有Mustache灵活，后面不可加其他东西

<div id = "app">
	<h2 v-text = "message"></h2>
    <h2>{{message}}</h2>
</div>

v-pre

<div id = "app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>   //不进行解析，直接输出
</div>