vue基础(1)

简介

• 他是一个渐进式的框架(就是一开始不需要你完全掌握它的全部功能特性，可以后逐渐增加功能。没有多做职责之外的事情)
• 他是一个构建用户界面的框架;
• 他是一个轻量级的MVVM（Model-View-ViewModel）;

作用

不用直接操作DOM(虚拟dom)就能改变里面的数据;

官网

https://cn.vuejs.org/v2/guide/

安装(两种方式):

• 第一种.script直接引入

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

• 第二种.下载vue.js引入

 <script src="./vue.min.js"></script>

使用:

1.先引入
2. 创建一个 Vue 实例(每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue实例.

var vm = new Vue({
     
 	 // 选项
})

3.实例化vue对象

let vm =new Vue({
     
			el:""             //挂载
			data:{
                 //存放数据
				myname:'lisi'  //变量，状态
			},
			methods{
              //方法
				aa:function(){
     
				}
			}
		})
		    <div id="box">
        {
     {
     name}}
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var Vue = new Vue({
     
            el:"#box",
            data:{
     
                name:"张三"
            }
        })
    </script>

指令:

.直接使用{
     {
     }} 将数据解释为普通文本，而非html代码
v-html : 可以解析标签
v-text : 只能解析文本,不能解析标签
v-bind : 绑定属性  简写:  :
v-once :执行一次性地插值，当数据改变时，插值处的内容不会更新
v-on:绑定事件   简写 :@
v-show/v-if: 显示/隐藏
v-pre: 不解析,原样输出
v-directive :自定义属性
v-for : 列表循环
v-solt:插槽

方法methods:

methods:{
     
	方法名:function(){
     },
	方法名(){
     }
}

用{ {}}调用这个方法 要写() { {aa()}}
事件触发 @click=‘aa’ 可以有()也可以没有
如果需要传参数,加上() 把$event这个特殊参数传进去可以获取事件对象

计算属性(computed)

  computed:{
     
         bb(){
     
          return this.arr.filter(a=>a.indexOf(this.search) > -1)
          },
          cc:{
     
          //调用计算属性时自动触发get方法,修改计算属性时自动触发set方法
          	set(a){
     
              console.log('我是set'+"接收的内容"+a+"接收的内容")
                  },
            get(){
     
             console.log('我是get')
            return this.arr.filter(a=>a.indexOf(this.search) > -1)
				  }
                 }
            },

注意点 :

• 计算属性有缓存

• 直接{ {}}调用不用写()

• 当计算属性所依赖的属性发生变化时他会重新计算一次
  计算缓存:
  计算属性是基于它们的依赖进行缓存的;
  计算属性只有在它依赖的属性发生改变时才会重新计算;
  计算属性 watch

watch监听

 watch:{
     
   name(newvalue,oldvalue){
     
  //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值
   // this.age
  // console.log('name属性发生变化了')
    console.log(newvalue,oldvalue)
   }

注意点:

• 注意名字 起的名字必须和监听的属性一致
• 触发条件.当你监听的属性发生变化时,会自动调用对应监听方法
• 使用场景 异步处理 开销比较大的运算