数据绑定
vue核心是一个允许采用简洁的模板来声明式将数据渲染进DOM的系统。
举个栗子：官网写法如下
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在实际项目中，
export default {
data(){
return {
showCityStatus:false,
city:"",
cityCN:"国籍",
bankCardForm:{
"bankAccountNo": "",
"bankAddress": "",
},
currencyList:[]
}
},
methods:{
cityStatus(){},
addChargeCard(){},
},
mounted(){},
created(){}
}
在组件中是通过在data(){}这个函数中进行绑定的，初始化数据状态类似于react里面的初始化状态：this.state={blah,blah,blah}.只要在data中定义了变量就可以在vue里面的template代码中使用。我们使用data里面的cardName数据就可以这样写：
<div id="app"> {{cardName}}</div>
关于指令
在Vue项目中会用到很多指令，这些指令可以直接绑定到元素身上。在react中一般都是直接在JSX代码中进行绑定。下面来说一下react如何绑定以及v-指令
1，v-bind特性被称为指令，指令带有前缀v-。
举个官方写法栗子：
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
提示：span和div标签是具有title属性的，这个属性允许人们将鼠标停留在上面几秒可以看到title里面的值。
这里将message设置了值，那么通过v-bind就可以将title和message动态绑定。在Vue项目中的写法是不用写el:"#app-2"的，因为在项目中已经模块化，当前组件内使用到的状态都可以直接使用。在react里面也是直接写状态名。
2，v-if 是否显示某绑定元素
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
v-if指令写法同理上面。在这里说一下react里面的写法。可以通过{}里面的三元运算符来展示p标签。举个栗子：
{
this.state.seen?<p v-if="seen">现在你看到我了</p>:null
}
这种写法在Vue里面应该也可以，但是Vue提供了v-if指令，我们就爽快的使用吧，还能减少代码量。
3，v-for指令。
这个指令经常会用到，是用来循环展示数组的。官方文档的栗子：
<div id="app-4">
<ol>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
Vue项目中写法同上。在react中可以使用map来进行循环渲染。举个栗子：
{
this.state.todos.map((todo,index)=> (<ol key={todo.id}>
<li>
{{ todo.text }}
</li>
</ol>))
}
4，v-text。
这个指令和标签内的内容设置是一样的。
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
5，v-model。
这个指令可以用来创建双向数据绑定，用在input，textarea，select里面。这个指令会忽略所有表单元素的value，checked，selected初始值。总是将Vue实例data函数里面的数据作为数据来源。所以要在data函数里面声明初始值。
双向数据绑定，我理解的是用户在输入的数据的时候，组件中的data状态也进行了改变，可以直接拿到输入的值。
官方给出的栗子：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
在这里强调一下Vue里面的input修饰符
lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：
<input v-model.lazy="msg" >
number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
<input v-model.number="age" type="number">
trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
6，v-once指令用来进行优化更新性能。使用了该指令的元素或者组件，值渲染一次，随后的重新渲染，将被认为是静态内容并跳过。
7，ref。Vue中使用ref来对元素或者子组件注册引用信息。这个引用信息，会注册在父组件的refs对象上，只想DOM元素或者组件实例。使用的时候需要在渲染结束后进行使用。在渲染完成前不能访问他们，还不存在。
这个属性和react里面的ref是一样的。写法不太一样。
网友评论