1.几种参数的传递及用法,弹性布局，三元运算符
        块级元素 会单独的占用浏览器一行
        行内元素  两个或者多个行内元素可以并排显示
        Vue双向数据绑定
           v-model 绑定值（绑定一个数据值 当我们这个数据值变动的时候 对应的地方都会变）
           v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。
                    你应该通过 JavaScript 在组件的 data 选项中声明初始值。
           v-text 就是vue的文本数据（可以直接调用data里面的数据）
          v-show是boolean值  值为true的时候就显示,值为false就隐藏不显示
          v-show就是用来显示某个便签

        vue的三元运算符
            三元运算符 就相当于if else语句
            三元运算符中 后面的部分相当于else
            三元运算符 一般用于动态改变类名
             <h3 :class=”san?’h3one’:’h3two'”>三元运算符</h3>
              <button @click=”btnFont”>改变字体颜色</button>

        vue中循环语句
            item 就是指循环一次返回的对象 如果要找到对象中的任意对象名 用item.对象名 的方式
              <div v-for=”(item,index) in arrlist” :key=”index”>
                  <p v-text=”index” style=”color:black”></p>
                  <p v-text=”item.name” style=”color:black”></p>
              </div>
              数据源里面数组的写法;
              arrlist: [
              一个大括号就是一个对象，对象与对象之间要用逗号隔开
        {
          number: 1,
          name: “aa”
        },
        {
          number: 2,
          name: “bb”
        },
        {
          number: 3,
          name: “cc”
        }
      ],

    3.路由跳转
        a标签跳转 能跳转到对应的vue文件中去 但是a标签跳转的方式 里面的内容不会显示出来
        router-link方式跳转
        例：
        <router-link :to=”{path:’/review’}”>
          <li>首页</li>
        </router-link>
        to里面放的就是我们路由规则里面的path路径

    5.路由传参
      vue中 从A页面跳转到B页面的时候 要传递参数（从A页面带东西去B页面使用）
      name 你要跳转的路由名称（router下面index.js里面匹配的）
      用router-link组件(一个页面与一个页面)之间传递参数
      params 要传递的参数
      name  params  传递 第一种
      path query 传递 第二中
    第一种方法：
     <router-link :to=”{name:’需要跳转到的页面’,params:{数据源名：’内容'(例：aaa:’天地玄黄’)}}”>
      <h3>点击跳转到for</h3>
    </router-link>

    第二种方法：
    <router-link :to=”{path:’/需要跳转到的页面’,query:{数据源中的一个名字（例msg）}}”>
      <p>跳转</p>
    </router-link>

    第三种方法：
    <button @click=”btn”>跳转</button>
    再在方法里面写：
    btn() {
        动态跳转路由(跳转页面)
        固定的写法$router 这是vuerouter里面的对象 push方法就是跳转
      
      this.$router.push({ path: “/路径” });
    },
export default {
  components: {},
  props: {},
  data() {
    // 数据源
    // data里面的数据 可以在这个页面中调用出来
    // data数据源里面所有的数据类型都可以自己定义
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    // methods里面写方法或者点击事件等格式：方法名(){console.log(“”);打印在控制台}
    // vue中的this是一个对象
    // 它可以调用到data里面的任何数据 其次也可以在其它地方可以调用不同的方法
    // 在一个方法里面 如果要调用data里面的数据源 可以用this指向
    // 凡是vue的实例里面所有内容 都可以用this指向找到
  },
  created() {
    // created里面也是可以用来写方法 但是created里面的方法会最先执行
  // created里面的所有内容都会默认执行
  },
  mounted() {}
};
</script>
<style scoped>

/* 
<style lang=”stylus” scoped>
局部引入样式：
@import ‘../../assets/css/login_icon.css’;
格式：@imtport ‘路径’;
一般情况 我们在开发过程中 不设置固定的宽度或者高度
  水平居中 它只能在一个div上设置了固定的宽度的时候才能居中
  当我们最外层div没有设置固定的宽度的时候，他的宽度会跟随浏览器的窗口尺寸进行变化
 弹性布局定义在大的那个div（包裹要并排显示的那个div上）
  弹性布局（弹性盒子） 就是拿来方便我们使用的
  1.方便我们并排显示
  2.方便我们居中（上下 左右）
  3.弹性布局中 不管是什么类型的标签元素都会并排显示
   

  写弹性布局的步骤
    1.定义弹性布局（弹性布局只能写在div上）
    2.(justify-content)定义水平排列的方式
    3.(align-items) 定义垂直（竖直）排列方式
  
  display: flex;
  center水平居中
  justify-content: center;
  space-between两端对齐
  justify-content: space-between;
  space-around两端距离相等 中间距离不相等
  justify-content: space-around;
  flex-start坐对齐（弹性布局中默认的水平对齐方式）
  justify-content: flex-start;
  flex-end右对齐
  justify-content: flex-end;

  center竖直（垂直）居中
  align-items: center;
  flex-startd顶端对齐
  align-items: flex-start;
  flex-end底部对齐
  align-items: flex-end;

  flex-direction定义弹性布局中项目（div 标签）的排列方式（并排显示 换行显示）
  row 默认值（并排的）  column 换行 */
</style>

版权声明：本文为hfbest原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/hfbest/p/13343439.html