vue和react对比
1. 数据渲染 vue是使用template模板进行渲染,react使用的是jsx语法,对组件进行渲染 vue模板中使用{{ this.data }} 双括号包着变量,代表变量表示的值。外面那层表示需要通过js进行解析,里面那层表示一个对象,即变量是通过对象形式定义的。 <h1>site : {{site}}</h1> 接下来我们看看如何定义数据对象。 data?用于定义属性,实例中有三个属性分别为:site、url、alexa。 methods?用于定义的函数,可以通过 return 来返回函数值。 {{ }}?用于输出对象属性和函数返回值。 <div id="vue_det"> ????<h1>site : {{site}}</h1> ????<h1>url : {{url}}</h1> ????<h1>{{details()}}</h1> </div>
react渲染的值是通过单大括号{ this.data }表示的。本来就是js语法进行渲染的,所以直接包着一层表示变量(对象形式)进行渲染。
<Menu.Item key="setting:1">你好 -
{this.props.user.userName}</Menu.Item>
2.vue中 因为变量是在data中定义的或者是从父组件通过props传递过来的 ? 2.方法绑定 vue中绑定的方法通过 ? ?模板中@click="methodName",在methods中进行定义。
<HeadBar @toggleMenu="toggleMenu"></HeadBar>
????methods: {
????????toggleMenu() {
????????????this.setNavCollapsed(!this.navCollapsed)
????}
? ?react中绑定的方法通过 ?组件中onClick={this.methodName}.若使用extends方法创建的组件,并且使用es6的箭头语法则不需要绑定this上下文,如果是普通方法定义,则需要bind绑定this的上下文 如使用createClass创建组件的话也不需要绑定this
? ?<span onClick={this.logout}>退出登录</span>
screenFull = () => {
if (screenfull.enabled) {
screenfull.request();
}
? ? ? ? };
?
3.改变渲染的方法
vue 是根据data的里面的值,当data中定义的变量代表的值或者从父组件传递过来的值props改变的时候,组件会重新的被渲染
react是根据state中的值,当state中定义的变量代表的值或者从父组件中传递过来的值props,或者从管理数据的redux传递给组件state的值(相当于state的值)发生改变的时候,组件会重新被渲染
?
4.组件渲染方法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 ? react使用的是jsx语法 React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX,但它有以下优点:
(1)插值,即渲染文本 文本:数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值 <h1>{{ message }}</h1> data() { return { message: ‘hello vue‘} } html : 通过v-html 指令用于输出html代码 <div ?v-html="messageHtml" ></div> data() { ? return { messageHtml ?: ?‘<h1>我是要被渲染的html</h1>‘} } (2)属性,class html中的属性使用v-bind指令 以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类: .class2{ <div v-bind:class="{‘class2‘: class1}"> (3)表达式: vue完全支持javaScript语法 <div id="app"> data: { (4)指令: 指令是带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子: <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术,更是梦想!</p> <p>哈哈哈,打字辛苦啊!!!</p> </template> </div> <script> new Vue({ el: ‘#app‘,data: { seen: true,ok: true } }) </script> (5)参数:参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性: <div id="app"> <pre><a v-bind:href="url">菜鸟教程</a></pre> </div> <script> new Vue({ el: ‘#app‘,data: { url: ‘http://www.runoob.com‘ } }) </script> 另一个例子是 v-on 指令,它用于监听 DOM 事件: <a v-on:click="doSomething"> 在这里参数是监听的事件名。 修饰符修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault(): <form v-on:submit.prevent="onSubmit"></form> (6)用户输入--input 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定: <div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: ‘#app‘,data: { message: ‘Runoob!‘ } }) </script> eg: 在用户点击按钮后对字符串进行反转操作: <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> <script> new Vue({ el: ‘#app‘,data: { message: ‘Runoob!‘ },methods: { reverseMessage: function () { this.message = this.message.split(‘‘).reverse().join(‘‘) } } }) </script> 标签内使用{{}},标签上使用"",模板内不需要加this,在导出的js语句中使用this。react中全程使用this绑定上下文,因为react是js渲染,vue使用的是模板字符串,所以在模板中不需要使用this进行绑定上下文。 (6)过滤器 vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示,格式如下: <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div> eg: <div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: ‘#app‘,data: { message: ‘runoob‘ },filters: { capitalize: function (value) { if (!value) return ‘‘ value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
过滤器可以串联: {{ message | filterA | filterB }}
过滤器是 JavaScript 函数,因此可以接受参数: {{ message | filterA(‘arg1‘, arg2) }}
这里,message 是第一个参数,字符串 ‘arg1‘ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。 ? 缩写v-bind 缩写Vue.js 为两个最为常用的指令提供了特别的缩写: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
v-on 缩写<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
? ?苏安年
??188***[email?protected]
给元素绑定href时可以也绑一个target,新窗口打开页面。
new Vue({ el: ‘#app‘, data: { url: ‘http://www.runoob.com‘, target:‘_blank‘ } })
尝试一下 ?
???苏安年
??188***[email?protected]
???锋
??cka***[email?protected]
???参考地址
当我们给一个比如 props 中,或者 data 中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用 Vue.set 方法。
Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新
这里本来 food 对象是没有 count 属性的,我们要给其添加 count 属性就必须使用 Vue.set 方法,而不能写成?this.food.count = 1
?
Vue.js 条件与循环
条件判断
v-if
条件判断使用 v-if 指令:
v-if 指令
在元素 和 template 中使用 v-if 指令:
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:
?
v-if ?v-else-if?
v-show: ? 不占位置,v-if ?不占位置
我们也可以使用 v-show 指令来根据条件展示元素:
循环语句
循环使用 v-for 指令。
v-for 指令需要以?site in sites?形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:
模板中使用 v-for:
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据:
Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新
?
computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。