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

%title插图%num

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

我也不跟你说废话,有本事就别往下。为什么要用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刷新。

vue是什么软件?

微信朋友圈里面的动态视频可以用这个软件制作。

VUE视频拍摄app是一款视频拍摄软件,VUE视频拍摄app高端大气的appUI设计风格,独特创新的软件功能,让你轻松拍出好视频!VUE支持微信竖屏全屏拍摄、新的动态贴纸和调起微信分享等功能,并可分享至朋友圈直接播放,助你在朋友圈脱颖而出。