Vue学习记录

Vue

标签（空格分隔）： 未分类

---

声明式渲染

<div id="app">
    {{message}}
</div>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            message:'hello,world!'
        }
    })
</script>

绑定属性f

<div id="app">
    <span v-bind:title="date">
        鼠标悬停查看信息
    </span>
</div>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            date:'当前的时间'+ new Date().toLocaleString()
        }
    })

</script>

条件判断

<div id="app">
    <span v-if="show">    // v-if:在初次加载判断一个表达式，来决定是否渲染这个结构
        现在你看到我了
    </span>
</div>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            show:false
        }
    })

    // 在控制台输入  vm.show = true  ;  控制显示
</script>

循环语句

<div id="app">
    <ul>
        <li v-for="(item,i) in list">
            {{i}} :{{item.text}}  // i 代表key 值  
        </li>
    </ul>
</div>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            list:[
                {text:'1'},{text:'2'},{text:'3'},
            ]
        }
    })
</script>

用户输入

  <div id="app">
    <ul>
      <input type="text" v-model="message">
      <p>{{message}}</p>
    </ul>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello'
      }
    })
  </script>

组件化应用 – 全局组件

  <div id="app">
    <ul>
      <todo-item 
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
      >

      </todo-item>
    </ul>
  </div>


// 定义一个名叫todo-item 的组件   
Vue.component('todo-item',{
    props:['todo'],
    template:'<li>{{ todo.text }}</li>'     //template翻译 模板
})

var vm = new Vue({
      el: '#app',
      data: {
        groceryList: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
        ]
      }
    })

局部组件

    // 局部组件
    const Child = {
      template: '<h1>{{message}}</h1>',
      // data: {
      //   message: 'hello'
      // }
      data() {   // 组件的data 必须是一个函数，函数的返回值就是数据
        return {
          message: 'hello'
        }
      }
    }

    new Vue({
      el: '#app',
      components: {
        'my-template': Child
      }
    })

Vue双向数据绑定 / input select textarea ；

方法1： ref 绑定
    <div id="app">
        <lable>姓名</lable>
        <input  type="text" ref="name" v-on:keyup="logName">
        <span>{{name}}</span>
        <lable>年龄</lable>
        <input  type="text" ref="age" @keyup ="logAge">
        <span>{{age}}</span>
    </div>

    const vm = new Vue({
      el: '#app',
      data: {
        name: "",
        age: ""
      },
      methods: {
        logName: function () {
          //console.log(this.$refs.name.value);
          this.name = this.$refs.name.value;
        },
        logAge: function () {
          this.age = this.$refs.age.value
        }
      }
    })

-------------------------------------------------------------
v-model 绑定的是要输出的值  就是data 里面的值

  <div id="app">
    <lable>姓名</lable>
    <input type="text" v-model="name">
    <span>{{name}}</span>
    <lable>年龄</lable>
    <input type="text" v-model="age">
    <span>{{age}}</span>
  </div>

<script>
    const vm = new Vue({
      el: '#app',
      data: {
        name: "",
        age: ""
      }
    })

</script>

计算属性 computed

class 绑定

<style>
 .box {
      width: 100px;
      height: 100px;
      background: red;
    }
    .active {
      background: green;
    }

</style>
<div id="app">
    <div class="box" :class="{active:isActive}"></div>
    <button @click="changeColor">切换颜色</button>
</div>

<script>
const vm= new Vue({
    el:'#app',
    data:{
        isActive: false
    },
    methods:{
        changeColor(){
            this.isActive = !this.isAstive
        }
    }
})
</script>

属性传值（父组件向子组件传值）Props

app.vue 文件
<div id="app">
    <router-view></router-view>
    <app-content v-bind:aad="users"></app-content>  // v-bind:aad="users"  aad是自定义的名字，users 是 data里面的数据users  名字需要对应
    <app-footer></app-footer>
  </div>

  //局部注册组件
import Header from './components/Header'
import Footer from './components/Footer'
import Content from './components/Content'
export default {
  name: 'app',
  data(){
    return{
       users:[
          {name:'admin',position:'web开发',show:false},
          {name:'admin',position:'web开发',show:false},
          {name:'admin',position:'web开发',show:false},
          {name:'admin',position:'web开发',show:false},
          {name:'admin',position:'web开发',show:false},
          {name:'admin',position:'web开发',show:false},
          {name:'admin',position:'web开发',show:false},
          {name:'admin',position:'web开发',show:false},
          {name:'admin',position:'web开发',show:false},
        ]
    }
  },
  components:{
    'app-header':Header,
    'app-content':Content,
    'app-footer':Footer
  }
}
</script>

子组件中调用父组件的数据
Content.vue文件

<template>
  <div>
    <ul class="content">
        <li v-on:click="item.show = !item.show" 
            v-for="item in aad">
            <h2>{{item.name}}</h2>
            <h3 v-show="item.show">
                {{item.position}},
            </h3>
        </li>
  </ul>
  </div>

</template>
<script>
  export default {
    name: 'Content',
    //props:['aad']   // 名字需要给自定义的名字保持一致   一般写法；
    严禁的写法；
    aad:{
        type:Array  //传递数据的类型；   //传值（number,string, ）
        required:true
    }
  }
</script>

vue-路由

main.js文件
import VueRouter from 'vue-router'  // 引入vuerouter 路由 

12.21

• 安装脚手架 npm install –global vue-cli
• 创建一个基于 webpack 模板的新项目 vue init webpack + 文件名
• 安装依赖，走你 $cd 文件名$ npm install $ npm run dev

单文件

• 单文件组件 一个文件就是一个组件 以.vue结尾

单文件组件

• 1 结构 template
• 2 样式 style
• 3 交互 script

te    

组件的组成

• 1 结构
• 2 样式
• 3 交互

vue-router

router文件夹/index.js;
引入vue;
import Vue from 'vue'
import VueRouter form 'vue-router'  //引入vue-router

Vue.use(VueRouter);// 把vue-router作为一个插件使用

// 配置映射关系
mode:'history';  //模式为history  默认为hash;
routes:[
    { //路由 / 路由对象
    path:
    component
    }
]

例如：
const router = new VueRouter({
    mode:'history',
    routes:[
        {
            path:'/',
            component:Home
        }
    ]
})

//最后需要暴露一下
export default router;

路由标签
<router-link to="/hello">HELO</router-link>

缓存 对访问过的内容进行缓存

<keep-alive>
    访问过的内容
</keep-alive>