1、js，jQuery编程范式：命令式编程
vue编程范式：声明式编程
v-for 遍历数组内容
v-on: click 监听点击事件，语法糖 @click
- el：
类型：string | HTMLElement
作用：决定之后 Vue 实例会管理哪一个 DOM。
- data：
类型：Object | Function（组件当中data必须是一个函数）
作用：Vue实例对应的数据对象
- methods
类型：{ [ key : string ]:Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
<div id="app">
<h2>当前数量：{{ val }}</h2>
<ul>
<li v-for="val in project">{{ val }}</li>
</ul>
<button v-on:click="add">+</button>
<button @click="down">-</button>
</div>
<script>
const app = new Vue({
el: "div", // 用于挂载要管理的元素
data: { // 定义数据
val: 0,
project: ["数学", "语文", "英语"]
},
methods: { //定义方法
add: function() {
this.val++;
console.log("add被点击了");
},
down: function() {
this.val--;
console.log("down被点击了");
}
}
});
</script>
2、vue中的MVVM：
3、开发中什么时候称为函数，什么时候称为方法？
函数：function
直接在script 标签中定义的 function fn(){}
方法：method
在类里面的东西一般叫方法，方法一般是和实例对象挂钩的
4、Vue 的指令
1.mustache语法（双大括号{{ }}）
<h2>{{message}}</h2>
<h2>{{message}}，自定义内容</h2>
<!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
<h2>{{firstName+ lastName}}</h2> // 连接两个变量
<h2>{{firstName+ ' ' + lastName}}</h2> // 连接两个变量，中间加空格
<h2>{{firstName}} {{lastName}}</h2> //连接两个变量，中间含空格
<h2>{{num * 2}}</h2> //计算变量
<h2>{{message}}</h2>
2. v-once：阻止界面内容随意更改
该指令后面不需要跟任何表达式
该指令表示元素和组件只渲染一次，不会随数据的改变而改变。
<h2>{{mes}}</div>
<h2 v-once>{{mes}}</div> //consolle控制台中更改mes的值，加了v-once中的内容不会被更改
3. v-html：解决从服务器请求的数据本身是 HTML 代码的问题
该指令后面往往会跟上一个 string 类型
会将 string 的html 解析出来并进行渲染
1.如果直接通过{{}}来输出，会将HTML代码一起输入
<h2>{{url}}</h2> // <a href='http://www.baidu.com'>百度链接</a>
2.如果想按照HTML格式进行解析，并且显示对应内容 则在标签中加入 v-html 指令
<h2 v-html='url'>{{url}}</h2> // 百度链接
url: "<a href='http://www.baidu.com'>百度链接</a>",
4.v-text：和{{ }}（Mustache）相似，都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型，不灵活，会覆盖原有的值，不建议使用
<h2>{{message}},自定义值...</h2> // 新插入数值，自定义值...
<h2 v-text='message'>自定义值...</h2> // 新插入数值（会覆盖原有的值）
message:'新插入数值'
5. v-pre：用于显示原本的 Mustache 语法(类似于html标签pre)
<h2>{{message}}</h2> // andy
<h2 v-pre>{{message}}</h2> //{{message}}
message:'andy'
6.v-cloak：浏览器会直接显示出未编译的Mustache标签，（类似于斗篷）。
在data 数据没解析之前显示出来，data数据解析之后删除掉
<style>
div{
display:none;
}
</style>
<div id="app">{{message}}</div> //如果函数加载慢，页面中直接显示{{message}}，用户体验不太好，可以使用v-cloak属性设置，没加载出来时显示v-cloak属性，函数加载出来后删除v-cloak属性。
<script>
const app = new Vue({
el:'#app',
data:{
message:'自定义...'
}
});
</script>