VUE的常用方法跟标签【初学者】

VUE的常用方法跟标签【初学者】

一，导入vue的js包

二，在

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

【1】.内容渲染指令（全部应用于，html的标签中间）

1.v-text 例子 :

<p v-text="值（在vue函数中的对应的值，即上述函数中，data里面的数据）"></p>

2，{{（值）}} 例子：

<p >{{值}}</p>

3，v-html可以在html代码中间插入，对应html格式的数据 例子：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>html例子</h1>'
  }
})
</script>

【2】.属性绑定指令

1.v-bind指令[单向的绑定] 对属性的值进行修改 绑定数据，数据渲染网页 例子：

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

2.v-model双向绑定指令，对应在可以修改，对应函数中的值也会被改变，全局会受影响

div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

 <input v-model="message">

相当于

<input v-model:value="message">

【3】，Vue条件语句

1，v-if语句，相当于if语句，如果条件不成立，其代码不会在html中出现与其对应的是v-show v-show条件不成立时，只是把显示给display但代码仍存在于html代码中 例子：

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <p>v-if的判定</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

2.v-else语句 与v-if连用 跟java中的异曲同工 例子：

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

3，v-else-if语句 例子：

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

【4】Vue循环语句

1，v-for语句 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 例子：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

其中也可以有索引的写法 例子：

<div id="app">
  <ol>
    <li v-for="（site，index） in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

index即为索引

小结：好了，这就是最基本的vue使用，会了这些，你就入门vue了，如果觉得有用，可以关注一下，感谢各位的关注呦，你们的鼓励就是我创作的动力呢