Vue

Vue

1. 安装nodejs
2. win+r cmd命令/打开命令窗口
3. 检验安装：
   node -v
   npm -v
4. 进入项目路径
   npm install 搜索package.json 安装依赖
   多一个node_modules文件夹（依赖文件）

• 编译运行：

5. npm run dev 开发运行
6. npm run build 发布文件 （dist文件夹内为静态发布文件）

目录结构

• node+modules：运行环境
• public：全局对象
• src：用户开发目录
  • assets：静态资源
  • components：页面（.vue文件）
    分三部分：html、script、style
• App.vue：启动文件（主配置文件）

简单使用

• 下载导入Vue.js包
  Vue.js

• 前端标签显示处理vue变量

  <div id="vue_det">
      <h1>site : {{site}}</h1>
      <h1>url : {{url}}</h1>
      <h1>{{details()}}</h1>
  </div>
  

• js包创建vue对象，设置数据

  <script type="text/javascript">
      var vm = new Vue({
          el: '#vue_det',	//选择器，除了body不可以用，其他和js一样
          data: {
              site: "菜鸟教程",
              url: "www.runoob.com",
              alexa: "10000"
          },
          methods: {
              details: function() {
                  return  this.site + " - 学的不仅是技术，更是梦想！";
              }
          }
      })
  </script>
  

语法属性

• v-html：嵌入html

  <div id="app">
      <div v-html="message"></div>
  </div>
      
  <script>
  new Vue({
    el: '#app',
    data: {
      message: '<h1>菜鸟教程</h1>'
    }
  })
  </script>
  

• v-bind：class/style/id，在属性中使用vue数据，小心单引号

  v-bind:style="'color:'+red1"
  v-bind:class="{'class1': use}"
  

• v-if，v-else：判断是否添加

  <div id="app">
      <p v-if="seen">现在你看到我了</p>
       <p v-else="seen">lhy</p>
  </div>
      
  <script>
  new Vue({
    el: '#app',
    data: {
      seen: true
    }
  })
  </script>
  

• v-show：是否显示（已添加）

  <h1 v-show="ok">Hello!</h1>
  

• v-on:click：事件
  在方法（methods）里面定义

  v-on:click="myclick"
  methods: {
  	myclick: function(){
  		alert(111);
  	}
  }
  

• v-for：循环数组，对象属性

  <li v-for="site in sites">
        {{ site.name }}
      </li>
      data: {
      sites: [
        { name: 'Runoob' },
        { name: 'Google' },
        { name: 'Taobao' }
      ]
    }
  

  <li v-for="site in sites">    数组
        {{ site.name }}
      </li>
  <li v-for="(value, key) in object">  
      {{ key }} : {{ value }}
      </li>
   <li v-for="(value, key, index) in object">     索引
       {{ index }}. {{ key }} : {{ value }}
      </li>
   <li v-for="n in 10">   整数
       {{ n }}
      </li>
  

• v-model ： 双向绑定根据控件类型自动选取方法来更新元素

缩写

• v-bind：

  <!-- 完整语法 -->
  <a v-bind:href="url"></a>
  <!-- 缩写 -->
  <a :href="url"></a>
  

• v-on：

  <!-- 完整语法 -->
  <a v-on:click="doSomething"></a>
  <!-- 缩写 -->
  <a @click="doSomething"></a>
  

过滤器

用作一些常见的文本格式化

• 使用方法

  {{ message | capitalize }}

  <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>
  

计算

• 计算属性的结果显示computed 属性默认只有 getter 不过在需要时你也可以提供一个 setter

  <p>计算后反转字符串: {{ reversedMessage }}</p>
  computed: {
      reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
      }，
  site: {
        // getter
        get: function () {
          return this.name + ' ' + this.url
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.name = names[0]
          this.url = names[names.length - 1]
        }
    }
  

$watch 监听属性

vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});

组件

• 全局组件

  <div id="app">
  	<runoob></runoob>
  </div>
  // 注册
  Vue.component('runoob', {
    template: '<h1>自定义组件!</h1>'
  })
  

• 局部组件

  var Child = {
    template: '<h1>自定义组件!</h1>'
  }
  new Vue({
    el: '#app',
    components: {
      // <runoob> 将只在父模板可用
      'runoob': Child
    }
  })
  

• 数据传递

  <input v-model="parentMsg">
        <child v-bind:message="parentMsg"></child>
  Vue.component('child', {
    // 声明 props
    props: ['message'],
    // 同样也可以在 vm 实例中像 "this.message" 这样使用
    template: '<span>{{ message }}</span>'
  })
  

路由

• 连接，显示
  <router-link to="/foo">Go to Foo</router-link>

  1. replace 不会留下 history
  2. append 添加基路径
  3. tag 渲染成某种标签
  4. active-class 链接激活 CSS 类

  <!-- 命名的路由 -->
  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
  <!-- 带查询参数，下面的结果为 /register?plan=private -->
  <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
  <router-link :to="{ path: '/abc'}" replace></router-link>
  <router-link :to="{ path: 'relative/path'}" append></router-link>
  <router-link to="/foo" tag="li">foo</router-link>
  <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Link 1</router-link>
  

• 设置路由

  1. 定义（路由）组件可以从其他文件 import 进来

     const Foo = { template: '<div>foo</div>' }
     const Bar = { template: '<div>bar</div>' }
     

  2. 定义路由

     const routes = [
       { path: '/foo', component: Foo },
       { path: '/bar', component: Bar }
     ]
     

  3. 创建 router实例

     const router = new VueRouter({
       routes // （缩写）相当于 routes: routes
     })
     

  4. 挂载根实例

     const app = new Vue({
       router
     }).$mount('#app')
     

动画

• 定义

  <transition name="slide-fade">
      <p v-if="show">菜鸟教程</p>
  </transition>
  

• 状态

  1. v-enter：定义进入过渡的开始状态
  2. v-enter-active：定义进入过渡生效时的状态
  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态
  4. v-leave: 定义离开过渡的开始状态
  5. v-leave-active：定义离开过渡生效时的状态
  6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态

• 样式 根据name属性+状态设置css

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  

混入（vue对象属性附加）

• 局部

  var mixin = {
      created: function () {
          document.write('混入调用' + '<br>')
      }
  }
  new Vue({
      mixins: [mixin],
          created: function () {
          document.write('组件调用' + '<br>')
      }
  });
  

• 全局

  Vue.mixin({
    created: function () {
      var myOption = this.$options.myOption
      if (myOption) {
        console.log(myOption)
      }
    }
  })
  

Ajax

• axios（推荐）

  1. 安装

     <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
     $ npm install axios
     

  2. GET

     mounted () {
         axios
           .get('https://www.runoob.com/try/ajax/json_demo.json', {
         params: {
              ID: 12345
           })
           .then(response => (this.info = response.data.sites))
           .catch(function (error) { // 请求失败处理
             console.log(error);
           });
       }
     

  3. POST

     axios.post('/user', {
         firstName: 'Fred',        // 参数 firstName
         lastName: 'Flintstone'    // 参数 lastName
       })
       .then(function (response) {
         console.log(response);
       })
       .catch(function (error) {
         console.log(error);
       });
     

  4. 执行多个并发请求

     function getUserAccount() {
       return axios.get('/user/12345');
     }
      
     function getUserPermissions() {
       return axios.get('/user/12345/permissions');
     }
     axios.all([getUserAccount(), getUserPermissions()])
       .then(axios.spread(function (acct, perms) {
         // 两个请求现在都执行完成
       }));
     

  5. 别名支持

     axios.request(config)
     axios.get(url[, config])
     axios.delete(url[, config])
     axios.head(url[, config])
     axios.post(url[, data[, config]])
     axios.put(url[, data[, config]])
     axios.patch(url[, data[, config]])
     

• vue-resource

  1. GET

      get:function(){
                     //发送get请求
                     this.$http.get('/try/ajax/ajax_info.txt',
                            {params : {a:1,b:2}})
                    .then(function(res){
                         document.write(res.body);    
                     },function(){
                         console.log('请求失败处理');
                     });
                 }
     

  2. POST

      post:function(){
                     //发送 post 请求
                     this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
                         document.write(res.body);    
                     },function(res){
                         console.log(res.status);
                     });
                 }
     

响应接口

• Vue.set 解决 Vue 无法检测添加属性
  Vue.set( target, key, value )
• Vue.delete
  Vue.delete( target, key )