vue html方法入参绑定,Vue基本语法和父子组件传参（prop、emit）

Vue基本语法和组件传参

基本语法

Vue是一个 MVVM 的框架, 数据驱动 和 组件化 是Vue的核心思想。简单的讲MVVM框架就是：我们只需要在数据层做数据操作，显示层会检测到我们每次的数据变化，然后做出相应的改变，监测数据这个工作就是中间的 ViewModel 。通过这种模式，我们就可以不用再直接操作DOM节点来进行数据的改变。

一、插值

{ {data}} 在模板里可以实现data数据的展示，如果data数据改变，展示的数据也会响应式的改变。响应式的改变意味着我们不需要强制刷新页面就可以实现数据的变化。这种语法为 请输入代码 Mustache语法

这里是title的值：{ {title}}

export default {

name:'phonerisk',

data(){

return{

title:'testTitle'

}

}

}

网页上就会显示出来 data 里面 title 的值。

二、v-html

v-html 可以将一段 HTML 的代码字符串输出成HTML片段而不是普通的文本。

这里是

export default {

name:'phonerisk',

data(){

return{

html:'v-if'

}

}

}

网页上将html字符串渲染成颜色为蓝色的普通文本。

v-bind

Mustache ·语法不能用于HTML上，所以我们需要绑定一些属之类的需要使用 v-bind 。 v-bind 就是将data里面的数据绑定到HTML上面，从而实现属性的变化。

export default {

name:'phonerisk',

data(){

return{

imgUrl:"../../static/img/KFC.e66b2f8e.png"

}

}

}

v-bind 可以简写成 :

三、v-model

v-model 是用于 表单 输入的数据双向绑定。所谓双向绑定就是 视图层 的数据变化会引起 数据层 数据的改变，相反的， 数据层 的变化也会导致 视图层 展示数据的变化。

{ {name}}

改变名字

export default {

name:'phonerisk',

data(){