Vue.js的基础指令

Vue.Js

初识Vue

vue的核心是通过简单的语法模板将数据渲染进DOM系统

<div id='app'><div>

<script>
 var app = new Vue({
  el:'#app',
  data:{
    message:'hello Vue!',
  },
 });
</script>

1. 一个vue实例挂载到一个dom上
2. vue双向绑定:数据改变视图层重新渲染,用户操作界面可以改变vue实例中data的数据

使用data的变量

//直接渲染
<div id='app'>
 <span> {{message}} </span>
</div>

//属性绑定
<div id='app'>
 <span v-bind:title='message'> 鼠标悬可以看到效果 </span>
</div>

v-bind将span标签的title属性和message绑定到一起,当message发生变化的时候,页面上的显示也会跟着变化。
app.message=‘修改后的文字:hello Vue!!!’;

v-if指令

 <div id='app'>
   <span v-if='score >= 90'>优秀</span>
   <span v-else='score>=60'>及格</span>
   <span v-else>不及格</span>
 </div>
 
 <script>
 var app = new Vue({
   el:'#app',
   data: {
     score:91,
   }
 })
 </script>

v-for指令渲染列表

var app = new Vue({
 
  <div id='app'>
   <ul>
     <li v-for='todo in todos'>名称:{{todo.name}} 时间:{{todo.time}}</li>
   </ul>
  </div>

  <ul>
   <li v-for='(item,index) in 5'>
     item:{{item}}
     index:{{index}}
   </li>
  <ul>

  el:' #app',
  data:{
    todos:[
      {name:'吃饭',time:'7:30'},
      {name:'睡觉',time:'10:00'},
      {name:'打豆豆',time:15:00},
    ],
  }
});

v-on事件绑定

<div id='app'>
  <button v-on:click='reverseMessage'>改变文字顺序</button>
</div>

<script>
var app = new Vue({
  data:{
   message: 'hello Vue!'
  },
  methods:{
    reverseMessage: function(){
     this.message = this.message.split('').reverse().join('');
    },
  },
});
</script>

v-mdoel 双向绑定

v-model将表单输入与vue实例的状态相互绑定

<div id='app'>
  <input v-model='inputValue' />
</div>

<script>
 var app = new Vue({
   data:{
     inputValue:'default Value',
   },
 });
</script>

总结

1. v-bind 属性绑定
2. v-on事件绑定
3. v-if 条件分支
4. v-for 列表渲染
5. v-model表单输入双向绑定