vue使用

2017-12-11  本文已影响109人  紫陌于微

什么是vue

关于渐进式和自底向上增量开发:
知乎有篇文章：https://www.zhihu.com/question/51907207
高赞的是徐飞的观点：主张最少,用户使用可变性场景较多，经常会因为框架的主张而造成不便，比较形象的是第二个回答：
它给你提供足够的optional，但并不主张很多required，给你一座空房子，你所需要的东西是可选的，不会说必须要，选择空间较大

对于vue来说，大家都觉得有几个学习阶段:

image

vue简单使用 -- 不使用构建工具的时候

正常使用，上代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
new Vue({
  el:'#app',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})
</script>

跟正常的原生js和jquery相比较

<div id="app">
<p><span id="count">0</span>
    <button id="inc">+</button>
    <button id="dec">-</button>
  </p>
</div>
<script>
    var counter = document.getElementById('count');
    var btn1 = document.getElementById('inc');
    var btn2 = document.getElementById('dec');
    var count = 0;
    btn1.addEventListener('click',function (){
                counter.innerHTML = ++count;
            }
    )
    btn2.addEventListener('click',function (){
                counter.innerHTML = --count;
            }
    )
</script>

     <script
      src="https://code.jquery.com/jquery-3.1.1.js"
      integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
      crossorigin="anonymous"></script>
    <div id="app">
    <p><span id="count">0</span>
        <button id="inc">+</button> 
        <button id="dec">-</button>
      </p>
    </div>
    <script>
    var count = 0 
    $('#inc').click(function(){
      $("#count").html(++count)
    })
    $('#dec').click(function(){
      $("#count").html(--count)
    })
    </script>

回过头说一说vue的优点

整个Vue.js的应用接口设计的非常优美，但是能量巨大，做到这一点需要很多功力。这就是我佩服的设计哲学。把麻烦留给自己，让开发者感受简洁

vue几点思想：组件、生命周期、虚拟DOM

vue几个过程的具体实现

声明式渲染

遵循原则：MVVM(Model-View-ViewModel)(我们看到的结果)

例如，在渲染函数里面用到A.B的时候，这个就会触发对应的 getter。整个渲染流程具体要点如下：

当某个数据属性被用到时，触发 getter，这个属性就会被作为依赖被 watcher 记录下来。
整个函数被渲染完的时候，每一个被用到的数据属性都会被记录。
相应的数据变动时，例如给它一个新的值，就会触发 setter，通知数据对象对应数据有变化。
此时会通知对应的组件，其数据依赖有所改动，需要重新渲染。
对应的组件再次调动渲染函数，生成 Virtual DOM，实现 DOM 更新。
这样一个流程跟主流的一些框架，例如React是有较大区别的。在React中，当组件复杂的时候需要用 shouldComponentUpdate 做优化。但是，它也有自己的各种坑，比如要确保该组件下面的组件不依赖外部的状态。虽说这在大部分情况下是够用的，但遇到极大复杂度的应用，遇到性能瓶颈的时候，这个流程优化起来也是相当复杂的一个话题。

如下图所示，在Vue里面由于依赖追踪系统的存在，当任意数据变动的时，Vue的每一个组件都精确地知道自己是否需要重绘，所以并不需要手动优化。用Vue渲染这些组件的时候，数据变了，对应的组件基本上去除了手动优化的必要性。

<!doctype html>
<html ng-app="todoApp">

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>

<body>

    <div id="app">

        <h1>TodosList Demo</h1>

        <div>
            <input type="text" class="input-todo" v-model="newTodoContent">
            <button class="new-todo-btn" v-on="click: addNewTodo">新增</button>
        </div>

        <ul>
            <li v-repeat="todos" v-class="done: done" v-on="click: checkTodo($index)">
                {{content}}
            </li>
        </ul>

    </div>

    <script>
        var ViewModel = require("vue")

        var app = new ViewModel({
            el: "#app",
            data: {
                newTodoContent: "",
                todos: [{
                    content: "Make PPT!",
                    done: false
                }]
            },
            methods: {
                addNewTodo: function() {
                    if (!this.newTodoContent.length) return
                    this.todos.push({
                        content: this.newTodoContent,
                        done: false
                    })
                    this.newTodoContent = ""
                },
                checkTodo: function(i) {
                    var todo = this.todos[i]
                    todo.done = !todo.done
                }
            }
        })
    </script>
</body>

</html>
函数渲染与模板渲染
模板渲染：例如
<span>Message: {{ msg }}</span>

<template>
</template>
函数渲染
image
引入了虚拟DOM- 2.png
image

组件系统

image 
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

客户端路由

image

状态管理

image

构建工具

项目初始化(vue-cli)
// 全局安装 vue-cli
  npm install --global vue-cli
// 创建一个基于 webpack 模板的新项目
  vue init webpack my-project 
//这个地方还可以 vue init webpack-simple my-project 建议大家先建立简单模板了解结构,再渐进增强.
// 安装依赖，走你
  cd my-project
  npm install
  npm run dev


<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
  name: 'app'
}
</script>
<style>
html{
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}
body{
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 min-height:100%;
}
</style>



main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' //引入vue
import App from './App' //引入app.vue
import router from './router/index'
import store from './store/store'

import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.config.productionTip = false
Vue.use(iView);
Vue.prototype.HOST = 'http://127.0.0.1:8087/elder_home'
// Vue.prototype.HOST = 'http://192.168.199.239:8087/elder_home'

// Vue.use(axios);
new Vue({
    el: '#app',
    // router: router,
    router,
    store,
    render: h => h(App)
    // template: '<App/>',
    // components: { App }//注册app组件

});

补充

来源

上一篇下一篇

猜你喜欢

热点阅读