v-text
根据官网的解释，v-text更新了元素的textContent，v-text 约等于 插值
<template>
<div id="app" v-text="message">
</div>
</template>
<script>
import Slots from './components/Slot'
export default {
name: 'App',
data(){
return {
message:'Hello Vue'
}
},
}
</script>
<div id="app" v-text="message">
捏捏捏
</div>
如果在中间添加内容，发现浏览器无显示。说明v-text权重高于插值。
v-html
更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。
<template>
<div id="app" v-html="message">
捏捏捏
</div>
</template>
<script>
import Slots from './components/Slot'
export default {
name: 'App',
data(){
return {
message:'<span>我是html</span>'
}
},
}
</script>
同样不会显示文字，与v-text不同的是，v-html可以解析标签；如果此处使用v-text 会显示span
v-bind(:)
用法：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
（v-bind的用处比较广泛，详情建议看一下官网的文档或者直接百度相关内容）
<template>
<div id="app" v-bind:class="{red:isRed}">
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
isRed:true
}
},
}
</script>
<style scoped>
</style>
同理可绑定其他属性
官网例子就不敲了
v-show和v-if
v-show的原理 ----》jq里的 hide() display：none
v-if的原理---》jq里的 remove() DOM是否加载
<template>
<div id="app">
<input type="text" @keyup.enter="val" v-model="inputValue"/>
<p v-for="(item,index) in arr" :key="index">{{item.message}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
inputValue:'',
arr:[] //存储输入内容
}
},
methods:{
val(ev){
this.arr.push({message:this.inputValue})
this.inputValue=''
}
}
}
</script>
<style scoped>
</style>
代码很简单，循环空数组，通过input中的value Enter动态加入内容
<div id="app">
<input type="text" @keyup.enter="val" v-model="inputValue"/>
<p v-show="!arr.length">可见的v-show</p>
<p v-for="(item,index) in arr" :key="index">{{item.message}}</p>
</div>
在中间加段内容，那么v-show与v-if一样都是通过布尔值判定，初始化arr为空所以此时为true
当输出内容回车之后，此时arr.length存在，则v-show此时是false
消失的同时可以看到下方DOM是有display：none的样式的，同理换成v-if，则是没有DOM
v-for与v-on前面讲了许多就不重复了
data
关于data，很多人的第一印象就是，这个东西很简单，不就是把数据写到data里，就可以用双括号绑定数据了吗？
官方文档：
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。
实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。
以 _或 $开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
export default {
name: 'App',
data(){
return {
name:'vue'
}
},
mounted(){ //不懂这个无所谓
console.log(this.$data)
}
}
Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化，所以数据是通过get和set方法进行数据绑定的。
把name改成$name or _name，控制台可以输出值，但无法渲染到dom上，还会报错
mounted(){
console.log(this.$data.$name)
}
methods
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。（不多说，可以自己打印一下this自己看看）
网友评论