Vue入门及项目部署

vue.js是一个JavaScript MVVM（Model-View-ViewModel）库，由数据驱动和组件化的思想构建。

Vue.js的使用

1. List item

<div id="app">
{{ message }}
</div>

2. 定义model

<script src="js/vue.js"></script>
<script>
var exampleData={message: "hello world!"}
</script>

3. 创建一个vue实例或viewmodel，用于连接view与model

<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",         //讲实例挂载到app
data: exampleData
})
</script>

4. vue双向绑定–v-model：值修改互相影响

<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>

Vue.js常用指令

1. v-if=“expression”，条件渲染指令：根据表达式的真假删除和插入元素可搭配v-else，v-else-if(每个vue实例都会代理其选项对象中的data属性，所以可以直接访问)
2. v-show=“expression”,条件渲染指令：根据表达式的真假设置style属性搭配v-else，v-show为真仍会执行v-else
3. v-for=“item in items” / (item, key) in items：遍历数组
4. v-bind: argument=“expression”：参数多为HTML元素特性,例如：class
   vue提供了缩写方式 :
5. v-on:click=“function”：监听DOM事件，绑定方法或使用内联语句
   vue提供了缩写方式 @

Vue.js计算属性

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

computed依赖于缓存，只有相关依赖改变才会改变，可以用methods代替，重新渲染会再次调用

过滤器

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

<script>
new Vue({
el:,
data:,
methods:{},
filters:{capitalize : function (value){}}
})
</script>

其他
vue提供了有用的实例属性与方法，用$前缀与自定义变量区分

项目相关
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
watch:{} 监听值的变化，执行相应操作
父组件向子组件通信：
props：{} 子组件访问父组件的唯一接口
ref：元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，主要用于调用子组件的属性与方法父组件：<childref="msg"></child>this.$refs.msg.getMessage()
子组件向父组件通信：
this.$emit(event,agrs)：子组件传参于父组件父组件调用：event对应函数名(args)调用父组件函数：this.$parent.function
监听内部属性变动

watch: {
  'userinfo.agency_id': {
    handler(n_data, o_data){
      if( n_data.agency_id !=0 ){
        this.is_admin = false
      }else{
        this.is_admin = true
      }
    }
  },
  deep: true,   //深度监听
  immediate: true   //第一次绑定也执行函数
}

主要文件结构
router/index.js：连接路由与组件
index.html：首页入口文件
main.js：核心文件，替换index.html文件中div:app为组件(App.vue)中的模板template
App.vue：router-view由vue-router去渲染组件，讲结果挂载到这个div上
router/index.js：连接路由与组件

部署
Nginx部署，页面刷新404问题，修改配置文件如下：

location / {
                root /opt/macau/frontend/dist/;
                index index.html index.htm;
                try_files $uri $uri/ @router;
        }

        location @router {
             rewrite ^.*$ /index.html last;
        }