Vue简单指令

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/TheBestAge/article/details/87559123

1.文本内容
Mustache模板,表现形式{{语法}},不能作用在HTML特性(属性)上,只能存在单行一句

<head>
   <meta charset="UTF-8">
   <title>vue入门</title>
   <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
    <hl >{{message}}</hl><br>
    </div>

  <script>
   new Vue({
            el:"#root", 
            data:{
                message:"hello world",
            }
    </script>
</body>

2.HTML
双大括号将数据解释为不同文本,可以利用v-html指令输出真正的HTML。
而V-text是用于操作纯文本,会替代显示数据对象上的值,值发生变化,插值出也发生变化,是一个单向绑定的过程,就下面的例子而言,V-text会在标题处直接输出<span>hello world</span>,V-html则会解析未span框。
V-text一般使用{{}}来表示。

 <hl v-html='message'></hl>
...
 data:{
       message:<span>hello world</span>,
      }

3.v-bind

Vue最大的特点是具有双向数据绑定:利用V-bind可以实现组件之间的传值,也可以来绑定属性.
v-bind:editable="“可以简写为:editable=”"。在实际项目中会经常使用其来动态地改变属性值。

 <DatePicker :editable="false" :value="datavalue" type="date" @on-change="changedate"></DatePicker>

4.V-modal
特点双向绑定,但通常只作用域表单组件的绑定,例如input,select等

<div id="app">
  <input v-model="message " />
</div>
var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }

猜你喜欢

转载自blog.csdn.net/TheBestAge/article/details/87559123
今日推荐