学习Vue第一天小感悟

一天时间基本看完熟悉了基础的核心功能。但是一些功能有待于实践加强理解。毕竟MVVM的绑定和jQuery的基于dom的操作是有很大差别的。所以还得在实践中多多理解，只有理解了才会融会贯通，用起来才会得心应手，这样才能发挥技术的最大价值。

stuxt commented 7 years ago

第一天基础学习内容

[x] Vue实例的创建
[x] 基本的模板语法
[x] 计算属性
[x] 样式绑定
[x] 条件渲染
[x] 列表渲染
[x] 事件处理器
[x] 表单事件绑定
[x] 组件

stuxt commented 7 years ago

练习小示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Learn</title>
</head>
<body>
<div id="example-1-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<h1>声明式渲染</h1>
<div id="app">
  {{ message }}
</div>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<h1>条件渲染</h1>
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
  <template v-if="seen">
    <p>现在你看到我了1</p>
    <p>现在你看到我了2</p>
    <p>现在你看到我了3</p>
  </template>

  <div v-if="Math.random() > 0.5">
    Now you see me,> 0.5
  </div>
  <div v-else>
    Now you don't,< 0.5
  </div>

</div>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<h1>处理用户输入</h1>
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<h1>组件化应用构建</h1>
<div id="app-7">
  <ol>
    <!-- 现在我们为每个todo-item提供待办项对象    -->
    <!-- 待办项对象是变量，即其内容可以是动态的 -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>
<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<ul id="example-1">
    <li v-for="item in items">
        {{item.message}}
    </li>
</ul>
<script src="assets/vue.js"></script>
<!-- Since there is already a rich ecosystem of ajax libraries    -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also   -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="assets/axios.min.js"></script>
<script src="assets/lodash.min.js"></script>
<script type="text/javascript">
    var example11 = new Vue({
      el: '#example-1-1',
      data: {
        counter: 0
      }
    })
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    var app2 = new Vue({
      el: '#app-2',
      data: {
        message: '页面加载于 ' + new Date()
      }
    })
    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true
      }
    })
    var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ]
      }
    })
    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    var app6 = new Vue({
      el: '#app-6',
      data: {
        message: 'Hello Vue!'
      }
    })

    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })
    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { text: '蔬菜' },
          { text: '奶酪' },
          { text: '随便其他什么人吃的东西' }
        ]
      }
    })
    var watchExampleVM = new Vue({
      el: '#watch-example',
      data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
      },
      watch: {
        // 如果 question 发生改变，这个函数就会运行
        question: function (newQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.getAnswer()
        }
      },
      methods: {
        // _.debounce 是一个通过 lodash 限制操作频率的函数。
        // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
        // ajax请求直到用户输入完毕才会发出
        // 学习更多关于 _.debounce function (and its cousin
        // _.throttle), 参考: https://lodash.com/docs#debounce
        getAnswer: _.debounce(
          function () {
            var vm = this
            if (this.question.indexOf('?') === -1) {
              vm.answer = 'Questions usually contain a question mark. ;-)'
              return
            }
            vm.answer = 'Thinking...'
            axios.get('https://yesno.wtf/api')
              .then(function (response) {
                vm.answer = _.capitalize(response.data.answer)
              })
              .catch(function (error) {
                vm.answer = 'Error! Could not reach the API. ' + error
              })
          },
          // 这是我们为用户停止输入等待的毫秒数
          500
        )
      }
    })

    var example1 = new Vue({
        el:"#example-1",
        data:{
            items:[
                {message:'Foo'},
                {message:"Bar"}
            ]
        }
    })
</script>
</body>
</html>
`

stuxt commented 7 years ago

Vuex

Vue-router

stuxt / stuxt.github.io

［学习笔记］Vue.js从入门到项目应用 #18

学习Vue第一天小感悟

第一天基础学习内容

练习小示例