Question

可以直接使用html直接写内容,为什么要用vue.js

比如这个，明明可直接在<p>里面写内容，为何要多此一举在后台输入呢？
我现在搞不懂为什么要用vue.js。 请通俗易懂的讲解，不要复制，该看的都看了！
谢谢
<div id="app">
<p>{{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>

Answer 1

我也不跟你说废话，有本事就别往下看。为什么要用Vue？因为Vue不用写操作DOM的代码。简简单单一句话。
Vue不操作DOM有什么好处？如果你的页面样式要改变（改版），首先你要改html对吧，要改div里嵌套ul或者div嵌套div等等，改变这些之后你又要改变那些操作DOM的代码或者改动比较大的操作DOM的代码直接删除重新，因为样式变了。操作DOM能不能不要了，答案是可以的于是Vue诞生了(它诞生之前还有其他同类框架)。这时候我只关注页面改变就行了不用想怎么操作DOM了，有本事别往下看（哈哈，开玩笑）。
Vue颠覆了之前的工作方式，替代了Jquery的工作，操作DOM的工作全部交给了new Vue()这个对象，什么是操作DOM就是从服务器获取数据后需要将数据渲染到网页上比如：$('#app').txt('服务器数据')这是Jquery提供的方法先找到一个id是app的节点然后把这个节点文本替换成’服务器数据‘，在Vue开发中完全没有这类的代码存在，如果有还是你用Vue不熟悉（个人理解，可能也不对我对自己不自信）

例子：
<div id="app">
<input type="text" v-model:value="name"/>
<input type="button" value="添加" @click="add"/>
<table>
<tr>
<td>姓名</td>
</tr>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name: null,
list:[{id:0, name:'张三'}, {id:1, name:'李四'}, {id:2, name:'王五'}]
},
methods:{
add(){
var new_person = {id : this.list.length, name:this.name}
this.list.push(new_person)
this.name = null;
}
}
});
</script>
解析：
v-model:value="name" v-model:value 给value属性增加双向数据绑定（不懂双向数据绑定的看最下面的一坨废话）指向的"name"是什么？name是new Vue()对象里data下的name。name名字是自己随便起的想叫什么叫什么。也可以按你的代码里的叫message
@click="add" @click是Vue语法里一个点击事件，事件指向new Vue()里methods下的add函数，这个函数也是自己起的名字。
v-for="item in list" v-for代表循环的意思，循环new Vue()对象里data下的list对象数组，item代表循环的当前对象
:key="item.id" 打印对象的id属性，id要是唯一标示。这个可以不写不写的话有bug哈哈哈有啥bug的话再问我吧因为这个bug不好描述。
add(){
var new_person = {id : this.list.length, name:this.name}
this.list.push(new_person)
this.name = null
}
首先得点击‘添加’这个按钮才会触发这个add方法
this.list是什么？这个是new Vue()对象里data里的数据，this.list.length不用讲了吧， this.name是什么就是你当前在<input type="text" v-model:value="name"/>这是输入框里输入的数据。挖槽？我没有用Jquery获取文本框的内容竟然直接调用this.name就可以获取到文本框里的内容，重要事情说三遍在用Vue的时候是没有操作DOM的代码的。this.name确实是new Vue()对象里的属性值，只不过Vue对象发现页面改变了迅速更新到了自己的name属性上，v-model:value="name"这个就表示数据已经双向绑定了。
this.name = null 为什么最后要加这么一句，因为数据双向绑定所以把name置空以后数据的变化也会在页面上展示出来<input type="text" v-model:value="name"/>这个输入框的内容清空了，我有用$('input').val('')吗？并没有。重要的事情说三遍不操作DOM。
自己的废话（网上的废话理解了之后翻译给你的）
Vue是简洁的MVVM框架，M:Model是数据,V:View是视图层，VM就是前两个的中间层，用MVVM主要是用它的数据双向绑定或者单向绑定（个人理解），
单向绑定：数据改变则页面也会随着改变（完全不用Jquery操作DOM，之前的开发方式是获取完数据之后想要显示在页面上都会用Jquery操作DOM(DOM就是页面元素)）
双向绑定：页面改变数据也跟着改变，数据改变页面也会跟着改变。我给的这个简单例子就是数据双向绑定（不操作DOM）
如果MVVM都不知道的话那快快感谢我吧，我不仅仅回答了你的问题还给你多加了点料，哈哈其实我学Vue之前也不知道什么是MVVM只觉得这帮人净整些虚的让人去学习，知道MVVM后瞬间被打脸的感觉，确实很强。
Vue官网也明确的表示不推荐开发人员操作DOM因为它的VM层已经做了这方面工作了，你只要操作数据比如：this.message = '1' VM层自动查看有没有绑定页面上的DOM元素如果有使DOM刷新。

Answer 2

<p>Hello</p> 这是静态数据，是写死的，写的什么就是什么
<p>{{ message }}</p> 这是动态数据，显示的东西取决于变量message
还有Vue的优越之处并不是双花括号这样的，他的优点是不用直接对dom进行操作。

Answer 3

这种控制权限大，代码清晰。message 修改起来非常方便 不管是从后台传过来得，还直接修改

追问

我的意思是，我完全可以

Hello Vue.js!

这么写，也很容易修改呀~ 权限大是指什么？

追答

非常自由 你这样写比如有十几行你得重复十几遍 比较臃肿 vue 把数据放date里就行了 用个for直接放标签上 循环就行 而且很好维护这个数据

更主要的是当这个项目逻辑越来越大时，就能体会到vue的 好处

Answer 4

灵活啊，从后台是动态数据，你直接写就是静态数据，只有这一行代码，你感觉直接写更方便，如果是一个项目呢，我这个p标签里，要显示的数据如果变了呢，去服务器上改吗？如果反复修改，你反复去服务器修改吗？

Answer 5

等你要写几十个页面还要修改的时候你就知道哪种好用了