Welcome to Logan's Blog!

博客主题访问地址：https://github.com/logan70/logan70.github.io

• MVC、MVP、MVVM

  2018-01-30

  Logan

  VUE

  MV*
  • MVC
    • 互动模式

  MVC

  MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

  MVC模式的意思是，软件可以分成三个部分。

  • 视图（View）：用户界面。
  • 控制器（Controller）：业务逻辑
  • 模型（Model）：数据保存

  互动模式

  各部分之间的通信方式如下。

  

  阅读全文

  ---

• Vue.js小白入门

  2018-01-16

  Logan

  VUE

  VUE
  • 实例化Vue对象

  实例化Vue对象

  <div id="app1">
      <h1>{ { name } }</h1>
      <p>{ { job } }</p>
      <p>{ { sayHi("methods 方法") } }</p>
      <a :href="website">logan个人博客</a><br>
      <p v-html="websiteTag"></p> <br>
      <button @click = "greet">欢迎</button>
  </div>
  
  <script>
      var app1 = new Vue({ 
          el : "#app1",
          data : { 
              name : "logan",
              job : "fronted enginner",
              website : "http://logan70.github.io",
              websiteTag : "<a href='http://logan70.github.io'>v-html</a>"
           },
          methods : { 
              greet: function(){ 
                  alert("Hello Vue!")
               },
              sayHi : function(txt){ 
                  return "hello " + this.name + " ! " + txt
               }
           }
       })
  </script>
  

  阅读全文

  ---

• Vue.js入门-6-组件

  2018-01-14

  Logan

  VUE

  VUE
  • 什么是组件
  • 使用组件
    • 全局注册

  组件

  什么是组件

  组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

  所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

  使用组件

  全局注册

  要注册一个全局组件，可以使用 Vue.component(tagName, options)。例如：

  Vue.component('my-component', { 
    // 选项
   })
  

  组件在注册之后，便可以作为自定义元素 <my-component></my-component> 在一个实例的模板中使用。注意确保在初始化根实例之前注册组件：

  <div id="example">
    <my-component></my-component>
  </div>
  
  // 注册
  Vue.component('my-component', { 
    template: '<div>A custom component!</div>'
   })
  
  // 创建根实例
  new Vue({ 
    el: '#example'
   })
  

  阅读全文

  ---

• Vue.js入门-5-表单输入绑定

  2018-01-14

  Logan

  VUE

  VUE
  • 基础用法
    • 文本
    • 多行文本
    • 复选框

  表单输入绑定

  基础用法

  可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

  文本

  <input v-model="message" placeholder="edit me">
  <p>Message is: { {  message  } }</p>
  

  多行文本

  <span>Multiline message is:</span>
  <p style="white-space: pre-line;">{ {  message  } }</p>
  <br>
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
  

  复选框

  单个复选框，绑定到布尔值：

  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{ {  checked  } }</label>
  

  阅读全文

  ---

• Vue.js入门-4-事件处理

  2018-01-14

  Logan

  VUE

  VUE
  • 事件处理
    • 监听事件
    • 事件处理方法

  事件处理

  事件处理

  监听事件

  可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

  <div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked { {  counter  } } times.</p>
  </div>
  
  var example1 = new Vue({ 
    el: '#example-1',
    data: { 
      counter: 0
     }
   })
  

  事件处理方法

  v-on 还可以接收一个需要调用的方法名称。

  <div id="example-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
  </div>
  
  var example2 = new Vue({ 
    el: '#example-2',
    data: { 
      name: 'Vue.js'
     },
    // 在 `methods` 对象中定义方法
    methods: { 
      greet: function (event) { 
        // `this` 在方法里指向当前 Vue 实例
        alert('Hello ' + this.name + '!')
        // `event` 是原生 DOM 事件
        if (event) { 
          alert(event.target.tagName)
         }
       }
     }
   })
  
  // 也可以用 JavaScript 直接调用方法
  example2.greet() // => 'Hello Vue.js!'
  

  阅读全文

  ---

• Vue.js入门-3-条件渲染、列表渲染

  2018-01-14

  Logan

  VUE

  VUE
  • 条件渲染
    • v-if
      • 在 <template> 元素上使用 v-if 条件渲染分组

  条件渲染、列表渲染

  条件渲染

  v-if

  我们可以使用v-if和v-else，实现逻辑判断功能。

  <div v-bind:style="styleObject" id="watch-example">
      <p v-if="ok">Yes</p>
      <p v-else>No</p>
  </div>
  <script type="text/javascript">
      var vm = new Vue({ 
          el: "#watch-example",
          data: { 
              ok:true
           }
       })
  </script>
  

  在 <template> 元素上使用 v-if 条件渲染分组

  v-if切换多个元素,可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

  <template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
  

  阅读全文

  ---