vue学习

推荐文章Vue.js——60分钟快速入门
 官网手册
Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新

本文代码可以直接复制粘贴出效果

注意点，`vue`的代码必须写在底部。

el:  ----------对应选择的标签
data : {} ---- 对应数据
methods :{} ---对应函数

1、首先我们打印`Hello Vue!`

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
       <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
    
        <!--这是我们的View-->
        <div id="app">
            {{ message }}
        </div>
    </body>
    
    <script>
        // 这是我们的Model
        var app = new Vue({
          el: '#app',  //此处关联的是要绑定数据的元素
          data: {
            message: 'Hello Vue!'
          }
        })
        /*或者
          // 这是我们的Model
        var exampleData = {
            message: 'Hello Vue!'
        }

        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        new Vue({
            el: '#app',
            data: exampleData
        })
        */
    </script>
</html>

2、我们在原代码基础上稍作修改v-model指令
使表单输入和应用状态间的双向绑定变得轻而易举。

  <div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>
这个时候，我们会发现我们在输入框李敏啊输入什么，p标签就会显示什么

3.v-bind指令
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class,
v-bind:argument="expression"

<html>
    <head>
        <meta charset="UTF-8">
        <title>input输入框</title>
       <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>
    </body>
    
    <script>
        var app2 = new Vue({
          el: '#app-2',
          data: {
            message: '页面加载于 ' + new Date()
          }
        })
    </script>
</html>

4.v-if条件与循环

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

<script>
    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true   //此处若为false，则不显示p标签中的内容
      }
    })
</script>

5.v-for循环

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

<script>
    var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ]
      }
    })
</script>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

       <body>
        <div id="app">
            <ul class="pagination">
                <li v-for="n in pageCount">
                    <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
                </li>
            </ul>
        </div>
    </body>
   
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeNumber: 1,
                pageCount: 10
            }
        })
    </script>
</html>

注意v-for="n in pageCount"这行代码，pageCount是一个整数，遍历时n从0开始，然后遍历到pageCount –1结束。
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

图片.png

组件化应用构建

<html>
    <head>
        <meta charset="UTF-8">
        <title>组建</title>
       <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

<body>
  <div id="app-7">
  <ol>
    <!-- 现在我们为每个todo-item提供待办项对象    -->
    <!-- 待办项对象是变量，即其内容可以是动态的 -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>
</body>

<script>
   Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: '蔬菜' },
      { text: '奶酪' },
      { text: '随便其他什么人吃的东西' }
    ]
  }
})
</script>
</html>

vue学习

注意点，vue的代码必须写在底部。

1、 首先我们打印Hello Vue!

组件化应用构建

推荐阅读更多精彩内容

注意点，`vue`的代码必须写在底部。

1、首先我们打印`Hello Vue!`