• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

1.初识vue

1.1初步使用模板

!声明文档类型

html lang='en '

meta charset='UTF-8 '

先认识vue/title

!-导入vue的包-

脚本src='./js/vue.js'/script

/头

身体

!-

先认识Vue:

1.如果想让vue工作,必须创建一个Vue实例,传入一个配置对象;

2.2.root容器中的代码仍然符合html规范,但是引入了vue的一些特殊语法。

3.3.root中的代码称为[Vue模板]

-

!-准备一个容器-

div id='root '

!-插值语法,使用两个花括号,这样数据中的所有内容都可以被读取-

H1姓名:{ {姓名}}/h1

H1姓名:{ {姓名}}/h1

H1年龄:{{age}}/h1

/div

脚本类型='文本/javascript '

vue . config . production tip=false;

//只传递一个参数,其类型为对象。

const vvm=new Vue({

//元素,该元素写入一个id选择器

//El : document . getelementbyid(' root ')

El: '#root ',//el用于指定vue实例服务于哪个容器,通常是css选择器字符串。

数据: {

名称: '饶鑫':

18岁

}

});

/脚本

/body

/html

1.2容器和实例对应关系

当有两个容器具有相同的类名时,一个vue实例。

vue实例将解析第一个容器,但另一个不会。

当有两个具有相同类名的容器和两个vue实例时

将报告一个错误

因此,容器和实例必须一一对应。

1.3双括号内写什么

lass="md-end-block md-p">插值语法
  • 两个花括号中必须必须要写js的表达式

  • 注意区分js表达式和表达式代码

  • 表达式

    • 一个表达式会生成一个值,可以存在任何需要值的地方

      • a

      • a+b

      • x===y?a:b

  • js代码

    • if(){}

    • for(){}

2.模板语法

2.1插值语法

  • 插值语法

    • 功能:用于解析标签体内容

    • 写法:{{xxx}}xxx是js表达式,且可以直接读取到data中的所有属性

2.2指令语法

  • 指令语法

    • 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件)

    • 举例v-bind:herf="xxx"可以简写为 :href = "xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。

    • 备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是那v-bind举例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>初识vue</title>
   <!--   导入vue的包-->

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

</head>
<body>

<div id="root">
   <!--       插值语法,使用两个花括号,这样就能读取到data里面的所有东西了-->
   <h1>插值语法:{{name}}</h1>
   <h1>指令语法</h1>
   <!--   v-bind是绑定 他就会将双引号里面的东西当做js表达式去执行 相当于找url变量-->
   <!--   v-bind可以简写为 : 冒号-->
   <a v-bind:href="url"  target="_blank" >点我去学习</a>
</div>

<script type="text/javascript">
   Vue.config.productionTip = false;

   new Vue({
       el: '#root',
       data: {
           name: '饶鑫',
           url:'https://www.bilibili.com/video/BV1Zy4y1K7SH?p=7&spm_id_from=pageDriver'
      }
  });
</script>
</body>
</html>

 

3.数据绑定

3.1单项数据绑定 v-bind

  • 单项绑定

    • 数据只能从data流向页面

3.2双向数据绑定 v-model

  • 改页面上的东西,页面里面的东西,也可以改变

  • v-model只能应用在表单类元素上,就是用在输入类的语句上,value值

    • 数据不仅可以凶data流向页面,还可以从页面流向data。

    • 备注

    • 双向绑定一般用在表单类元素上(input select)

    • v-model:value可以简写为v-model,应为v-model默认的收集得劲就是value值

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../js/vue.js"></script>
</head>
<body>

<div id="root">
  单项数据绑定:
   <input type="text" v-bind:value="name">
  双向数据绑定:
   <input type="text" v-model:value="name">
   <input type="text" v-model="name">
</div>


<script>
   Vue.config.productionTip = false;
   new Vue({
       el:'#root',
       data:{
           name:'raoxin'
      }
  })
</script>
</body>
</html>

4.el和data的两种写法

  • el的第二种写法

    • 一个是new vue的时候配置

    • 一个是先创建实例,通过x.$mount('#root');

    • <script>
         Vue.config.productionTip = false;
         const x = new Vue({
             // el:'root',
             data:{
             name:'raoxin'
            }
          });
         //也可以指定这个x实例的指向的容器
         x.$mount('#root');
      </script>
  • data的两种写法

    • 对象式

    • 函数式

      • 目前两种方法都可以,但是学到组件的时候,data必须用函数式,否则会报错

  • 重要原则

    • 由于vue函数管理,一定不要写箭头函数,一旦写了箭头函数,this就不再是vue实例了

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../js/vue.js"></script>
</head>
<body>

<div id="root">
  <h1>你好,{{name}}</h1>

</div>


<script>
   Vue.config.productionTip = false;
   //el的两种写法
   // const x = new Vue({
   //     // el:'root',
   //     data:{
   //     name:'raoxin'
   //     }
   // });
   // //也可以指定这个x实例的指向的容器
   // x.$mount('#root');

   // data的两种写法
   // 如上就是对象式
   //函数式
   new Vue({
       el:'#root',
       // data:function(){
       //     console.log(this);
       //     //这里的this输出就是vue
       //     //但是如果这个function写成箭头函数,这个this就是window,对之后得学习会有影响
       //     //()=>{}
       //     return{
       //         name:'raoxin'
       //     }
       // }
    //   在对象里面写方法,一般删掉function,删掉:
       data(){
           console.log(this);
           //这里的this输出就是vue
           //但是如果这个function写成箭头函数,这个this就是window,对之后得学习会有影响
           //()=>{}
           return{
               name:'raoxin'
          }
      }
    })

</script>
</body>
</html>

5.mvvm模型

vue作者参考了这个模型

  • vm就是处理数据和页面之间的桥梁,当数据发生变化的时候,这个视图层也会发生相应的变化

  • 所以在项目中经常用vm来代表实例对象

  • 红色框就是vm

  • new vue出来的实例对象的所有模型都可以在vm中,就是红色框中直接使用

6.数据代理 object.defineProperty()

6.1该方法的简单使用以及理解

这不叫数据代理

  • <script>
       let number = 18;
       let person = {
           name:'raoxin',
           sex:'nan',
      }
       Object.defineProperty(person,'age',{
           value:20
      })
    </script>
  • 通过这个方法有三个基本的特点

    • 不可修改

    • 不可删除

    • 不可枚举

  • 意思就是给person这对对象添加一个age他的value值是18

  • 但是这个值是不参与枚举的,意思就是,不参加遍历,也不可以通过person修改,不可以删除

  • 想要让他可以枚举

  • 想让他可以修改

  • 想让他可以删除

 

  • 需求

  • 需要这个number变,person里面的number也变

  • get函数就是getter

  • 我每一次查询age都会触发getter函数的调用,且值就是getter的返回值

6.2数据代理的定义

数据代理:通过一个对象代理对另一个对象中属性的操作

<script>
   // 通过obj1的值来修改obj2的值
   let obj1 = { x:100};
   let obj2 = { y:200};
   Object.defineProperty(obj2,'x',{
       //当有人读取obj2 x的值的时候,get就会被调用
       get(){
           return obj1.x;
      },
       //当有人修改obj2.x的时候,这个就会调用
       set(value){
           obj1.x = value;
      }
  })
</script>

6.3vue中数据代理的应用

  • 在vue中data就是代理的对象

  • 读取的时候和修改的时候

  • 验证

  • !!!!

7.事件处理

7.1鼠标点击事件的基本处理

<body>
   <div id="root">
<!--       点击是会调用myfun的函数-->
       <button v-on:click="myfun">点我提示信息</button>
   </div>

   <script>
       Vue.config.productionTip = false;
       // 这个函数放在外面是没有用的
       // var myfun = function (){
       //     alert('nihao1');
       // }
       new Vue({
               el:'#root',
               data:{
          },
           methods:{
               //   也可以myfun(){}
               myfun:function (){
                   alert('nihao1');
              }
          }
        })
   </script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 点击是会调用myfun的函数-->
<button v-on:click="myfun">点我提示信息</button>
<!-- @是v-on的简写-->
<button @click="myfun">点我提示信息</button>
</div>

<script>
Vue.config.productionTip = false;
// 这个函数放在外面是没有用的
// var myfun = function (){
// alert('nihao1');
// }
const x = new Vue({
el:'#root',
data:{
},
methods:{
// 也可以myfun(){}
myfun(event){
// alert(this ===x);//这里面的this就是x,就是vue实例,返回结果为true
alert('同学你好')
}
}
})
</script>
</body>
</html>

  • 传参就加showinfo()加括号,不传就不加,但是想要传参数,但是本身的event又不丢失,可以用$event占位

7.2事件修饰符

  • 防止点击弹窗后跳走,可以

  • 在vue中可以

7.1.1 vue中有哪些事件修饰符

 

7.1.2先阻止冒泡再阻止跳转

修饰符可以连续写

7.3键盘事件

7.3.1keydown(鼠标按下)

7.3.2keyup(鼠标按下并弹出)

  • 首先每个按键都有自己的按键编码,也有自己的名称(不是所有的按键都可以绑定事件)

  • 比如回车键是16,名称是Enter,在vue中绑定事件的时候用原来的名称也是可以的,但是vue为了我们更加的方便,将其都改为小写,如下面的图中的1

  • 如何去拿按键的原来的名称和编码呢

    • 如下可以使用console.log(e.keycode)和console.log(e.key)

    • 结果如下

    • <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="../js/vue.js"></script>
      </head>
      <body>
      <div id="root">
      <!-- 按下enter,以后调用conSole函数-->
      <input type="text" placeholder="按下提交" @keyup="conSole">
      </div>

      <script>
      Vue.config.productionTip = false;
      new Vue({
      el:'#root',
      methods:{
      // 获取值,即获取框中的值
      conSole(e){
      // console.log(e.target.value);
      console.log(e.key);
      console.log(e.keyCode);
      }
      }
      })
      </script>
      </body>
      </html>
  • vue给常用的按键都起了别名

  •  

  • <body>
    <div id="root">
    <!-- 按下enter以后调用conSole函数-->
    <input type="text" placeholder="按下提交" @keyup.enter="conSole">
    </div>

    <script>
    Vue.config.productionTip = false;
    new Vue({
    el:'#root',
    methods:{
    // 获取值,即获取框中的值
    conSole(e){
    console.log(e.target.value);
    }
    }
    })
    </script>
    </body>

7.3.3特殊情况(alt+y)

  • 比如绑定的是tab键,当我按下tab的时候,光标就已经切走了,还没有等我按键抬起来,就触发不了了,所以要配合keydown使用

  • 也可以配合其他键使用比如alt+y

  • ctrl+y

7.3.4自己定义别名

 

 

Link to comment
Share on other sites