前端-vue总结

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
npm init -f，生成package.json
package.json文件中缺少  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
// 添加上面的参数报错解决，cmd运行下面
"D:\nodejs\node.exe" "D:\nodejs\node_modules\npm\bin\npm-cli.js" install --scripts-prepend-node-path=auto
// 还是报错继续执行下面的
npm install webpack-dev-server@2.9.1
//缺什么就npm install什么
"proxy": "http://localhost:8081"

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
var data = { 
site: "菜鸟教程", 
url: "www.runoob.com", 
alexa: 10000
}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
 
document.write(vm.$data === data) // true

1、指令是带有 v- 前缀的特殊属性。

1.1、v-model双向绑定（表单元素）

<style>
.class1{// 双向绑定use
  background: #444;
  color: #eee;
}
</style>
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">// 双向绑定use
  <br><br>
  <div v-bind:class="{'class1': use}">
      <!--也可以 <div :class="{'class1': use}">-->
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});

2、v-on 指令，它用于监听 DOM 事件

2.1、v-on:click（也可以为@click）

<div id="app">
    <p>{{ message }}</p>
		<button v-on:click="reverseMessage">反转字符串</button>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

2.2、v-if、v-else、v-else-if

<div id="app">
    <div v-if="Math.random() > 0.5">
      0.5
    </div>
    <div v-else-if = "Math.random() > 0.5 && Math.random() < 2">
        0.5-2
    </div>
    <div v-else>
      up 2
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>
<!--标签外面用
{{#if ok}}
  <h1>Yes</h1>
{{/if}}
--> 

2.3、v-show

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

2.4、 v-for

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
<!------------- 迭代对象属性1---------------->
<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
    <!-- 带2参数的-->
   <ul>
    <li v-for="(value,key) in object">
    {{ value }}
        {{object[key]}}
    </li>
  </ul>
    <!--带3参数的-->
   <ul>
    <li v-for="(value,key,index) in object">
    {{ value }}
        {{object[key]}}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

3、过滤器

<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
// 过滤器可以多个{{ message | filterA | filterB }}

4、computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

5、Vue.js 监听属性(监听一个变量)

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
    <!-- 监听器-->
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>