【Vue】Vue简单介绍

前言：
　Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js起步
每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下：

var vm = new Vue({
    
    
  // 选项
})

Vue.js模板语法
1.插值
　1）文本
　　数据绑定最常见的形式就是使用 { {…}}（双大括号）的文本插值：

<div id="app">
     <div>{
   
   { message }}</div>
</div>
 
<script>
      new Vue({
     
     
         el: '#app',
         data: {
     
     
         message: '<h1>Hello vue</h1>'
         }
      })
</script>

2）HTML
　双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">
    <p v-html="html"></p>
</div>
var app = new Vue({
   el : '#app',
   data : {
     html: "<b style='color:red'>v-html</b>"    
 }
})

3）v-model
　 v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。


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

４)属性
HTML 属性中的值应使用 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- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
3.缩写
　v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

【Vue】Vue简单介绍

猜你喜欢