[聚合文章] vue入门总结

首先了解一下基本指令

v-mind.title = '属性名'  给某个dom添加属性

v-model = '可以是方法名、数据、算法、布尔属性'

v-if='true/false'  让元素消失，是指从页面上删除元素，或者显示，是从页面上添加元素
也可以当if条件用，
但是vue一般需要条件判断，通常使用三目运算

v-show= 'true/false' 让元素隐藏、显示    跟display:block/none相同

:key = '任意值'   不重复使用的指令

:class = {a,b}/{a:b,c:d}/[a,b,c]    class添加（前面不要少了冒号）

v-for('(i,index) in list(对象、数组)')   给什么元素上面添加，就循环这个元素执行

v-on:事件名='function名'  也可简写   @click='function名'

eg:    v-on:click='fun'     @click='fun';   fun 就是函数名，简写的意思

如果事件需要传参  可以使用function名(参数)

按键事件@key.键名/code值='fun'   回车的时候触发什么事件

eg:    @key.enter='fun'     @key.13='fun'

如果觉得vue方法满足不了自己的需求，那就自定义Vue方法，举例获取焦点focus

`1.先来一个全局定义

  Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted(el) { 
 // /*el代表所绑定的元素*/
    // 聚焦元素
    el.focus()
  },
  update(el) {
    el.focus();
  }
});

2.在看一个局部定义

  let vm = new Vue({
  // 声明一个vue的对象
  el: '.ipt',
  //el:后面接选择器的内容
  directives: {
  //自定义函数都放在directives
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.focus()
      }
    }
  }
})

创建一个文件为Vue，右击文件Vue空白处，打开git 输入

npm i -S vue     回车

新建一个html文件，在node_modules里面找到vue.js,用script引入

每次使用VUE都需要先引用vue.js，然后new一个新对象，用变量保存起来

View视图层

<div id=vm>
{{msg}}
<ul>
  <li @click='fun'>
  点我显示执行fun方法
  </li>
  <li :class='{a:visibility===true}'>
    我是class标签增加
  </li>
  <li>
    <p v-for='(i,index) in todolist'>
      姓名：<span>{{i.name}}</span>
      年龄：<span>{{i.age}}</span>
    </p>
  </li>
</ul>
</div>

<script src="./vue.js" charset="utf-8"></script>

Model层：

<script type="text/javascript">
var app = new Vue({
  el: '#vm',//选择器
  data: {
    //存储值地方
    msg: '我是vue',
    cla:'biaoqian',
    visibility: true,
    todolist: [
      {'name':'lsk','age':12},
      {'name':'ksj','age':16},
      {'name':'lxk','age':14},
      {'name':'lqk','age':15}
    ]
  },
  methods: {
    //存储方法的地方
    fun: () => {
      console.log('我是fun方法');

    }
  },
  computed: {
    //储存计算方法的地方
    showNuw() {
      return this.todolist.length //this指的new 出来的新对象 app
    },
    AllDown: {
      get() {
          console.log("我是get")
        },
        //页面刷新先执行一次
        //当执行AllDown方法,
        //则先运行set,再运行一次get
        set(vaule) {
          console.log("我是set")
          //并且vaule 这是指的调用者的新值
        }
    }
  },
  watch: {
    //储存监听方法的地方
    todolist: {
      //todolist 是监听对象的名
      deep: true, //启动监听
      handler: this.showNuw //this指的new 出来的新对象 app    或者方法()=>{}
    }
  }
})
</script>

还有很多小细节没总结完，后期会慢慢补上的

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。