Vue入门-TodoList案例

这是我参与更文挑战的第10天，活动详情查看：更文挑战

1.Vue实现Hello World

当引入Vue.js时会声明一个全局变量Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">{{content}}</div>
    <!-- {{}}叫插值表达式 去调用data中对应的数据-->
    <script>
        var app = new Vue({//创建Vue的实例
            el:'#app',//el:代表Vue实例负责管理的区域，'#app'是指让这个Vue实例接管id="app"的dom标签里的所有内容
            data:{
                content:'Hello World'//对应调用属于Vue实例下的{{content}}
            }
        })
    </script>
</body>
</html
复制代码

el：是说Vue实例的管辖范围，上面代表Vue接管了id为app的dom标签

data : 定义一些数据

案例两秒后让Hello World 变为 Bye World

<script>
    var app = new Vue({
        el:'#app',
        data:{
            content:'Hello World'
        }
    })
    setTimeout(function(){
        app.$data.content='Bye World'
    },2000)
</script>
复制代码

el , data这种Vue实例中的属性都有前缀$ 以便与用户定义的变量进行区别

app.$data.content='Bye world';//就可以修改div中的内容了 其余一样
复制代码

数据改变了，页面也会跟着改变

观察一个变量前后的变化的值的方法

app.$watch('a',function(newVal,oldVal){
	console.log(newVal,oldVal);
})
复制代码

2.Vue 语句

v-on : 绑定事件 v-on:click='' 可以简写为 @click=''
v-bind:index="index" 给元素属性赋值 v-bind:可以省略为:

2.1 v-if判断

显示隐藏信息

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
复制代码

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
复制代码

在控制台输入app3.seen=false，则之前显示的消息就消失了

2.2 v-for循环

Todolist

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
复制代码

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
复制代码

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

2.3 v-on事件监听

翻转消息

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>
复制代码

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
复制代码

2.4 v-model 表单输入和应用双向绑定

双向绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
复制代码

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
复制代码

2.5 总结

todolist完整案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="vue.js"></script>
</head> 
<body>
    <div id="app">
        <!-- 双向传递，一变都变 -->
        <input type="text" v-model="inputValue">
        <!-- 只要button被点击就执行handleBtnClick方法 -->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!-- 用v-for遍历数据list -->
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:['第一课的内容','第二课内容'],//被遍历到页面的数据
                inputValue: '' 
            },
            methods: {
                handleBtnClick:function(){
                    this.list.push(this.inputValue),//点击后向list push当前输入框内容
                    this.inputValue=''//点击完后清空输入框
                }
            }
        })
    </script>
</body>
</html>
复制代码