vue第一天学习笔记6-25

vue

Vue.js - 渐进式 JavaScript 框架 | Vue.js

vue生成html静态文件

1. 新建项目文件---必须使用英文名---建议不要放在c盘
2. 引入vue.js文件

vue.js

vue.min.js

1. 使用{{}}渲染属性
2. data用来写属性和属性值
3. 生成html静态文件

<div id="box"> //根组件
  <div v-text="msg">{{msg}}</div>
  <div v-html="html"></div>
  <div v-pre>666</div>
  </div>

  <script>
  let vm = new Vue({  //vue的语法
  el:'#box',  //el是元素
  data:{
    msg:'开始学习vue了',   //msg是属性
    html:'<h2>体验一下html</h2>',
  }
})
  </script>

原生js中渲染的方式-四种

1. js字符串拼接的方式

var a = 'java';
var b = a + 'script'
console.log(b)

1. 字符串模版语法拼接

var a  = '你好';
var b  = `${a} vue`
console.log(b)

1. 数组转字符串join方式拼接

var arr = ['java','python','vue'];
var str = arr.join('')
console.log(str)

1. javascript方式进行拼接

var a = '天气真热';
var b = '需要降温';
var c = a.concat(b)
console.log(c)

vue前端渲染方式

差值表达式

注意:可能会出现屏幕闪烁的问题

解决:把引入vue.js的script标签放在body开始标签下面,script的上方

带有v-前缀的指令

用法:

<div id="box"> //根组件
  <div v-text="msg">{{msg}}</div>
  <div v-html="html"></div>
  <div v-pre>666</div>
  </div>

  <script>
  let vm = new Vue({  //vue的语法
  el:'#box',  //el是元素
  data:{
    msg:'开始学习vue了',   //msg是属性
    html:'<h2>体验一下html</h2>',
  }
})
  </script>

v-text

填充文本信息,并且会覆盖节点的内容

<div id="box"> //根组件
  <div v-text="msg">{{msg}}</div>
  </div>

  <script>
  let vm = new Vue({  //vue的语法
  el:'#box',  //el是元素
  data:{
    msg:'开始学习vue了',   //msg是属性
  }
})
  </script>

v-html

填充文本信息,并且会覆盖节点的内容,并且可以识别标签

<div id="box"> //根组件
  <div v-html="html"></div>
  </div>

  <script>
  let vm = new Vue({  //vue的语法
  el:'#box',  //el是元素
  data:{
    html:'<h2>体验一下html</h2>',
  }
})
  </script>

v-pre

跳过编译过程不解析,按照所写的格式显示内容

v-cloak

可以将被覆盖的节点的内容显示出来

v-once

在浏览器只响应一次,不会再次响应

v-model

实现双数据绑定

<div id="box2">
  <div>{{message}}</div>
    <input type="text" v-model="message">
    <div v-text>{{message}}</div>
    </div>

  let cm = new Vue({
    el: '#box2',
    data: {
      message: '人生若只如初见',
      msg:'测试'
    }
  })

针对input框进行数据绑定,当输入内容时跟着响应数据

v-on 事件绑定

三种写法

<!-- 写法1 -->
<button v-on:click="add">点击加1</button>
<button v-on:click="reduce">点击减1</button>
<!-- 写法2 -->
  <button @click="add1">点击加2</button>
    <button @click="reduce1">点击减2</button>
    <!-- 写法3 -->
    <button @click="add2()">点击加3</button>
    <button @click="reduce2()">点击减3</button>

    <br><br><span>{{n+m}}</span>

  let vm = new Vue({
    el: '#box',
    data: {
      n: 0,
      m: 0,
      msg:'hello world'
    },
    methods: {
      add() {
        this.n += 1
      },
      add1(){
        this.m += 2
      },
      add2(){
        this.m += 3
      },
      reduce() {
        this.n -= 1
      },
      reduce1() {
        this.n -= 2
      },
      reduce2() {
        this.n -= 3
      },

<!-- 直接绑定函数名  事件对象应该作为事件函数的第一个参数,第二个参数为实参 -->
  <div @click="handle($event,'hello')">{{msg}}</div><br>
    <!-- 直接绑定函数回调 事件对象必须是事件函数的参数,并且是最后一个参数 -->
    <div @click="handleMsg($event)">{{msg}}</div>

  handle(a,b){
    console.log(a);//打印出事件的状态
    console.log(b);// hello
  },
  handleMsg($event){
    console.log($event);//打印出事件的状态
  },

阻止事件冒泡

<!-- 阻止事件冒泡 -->
<div style="height: 300px;width: 300px;background: yellow;" @click="handelButton()">
  <div style="height: 150px;width: 150px;background: blue;" @click.stop="handelBolue()"></div>
</div>

 handelButton() {
                    console.log('这是一个粉色的div');
                },
                handelBolue() {
                    console.log('这是一个蓝色的div');
                },

事件触发时会触发冒泡,如果要阻止事件冒泡 可以在事件的子元素上添加 .stop

阻止事件的默认行为

<!-- 阻止事件的默认行为 -->
<div><a href="https:www.baidu.com" @click.prevent="handelLog">点击跳转百度</a></div>

使用.prevent可以阻止事件的默认行为发生

打乱冒泡的顺序

<!-- .capture 打乱冒泡的顺序 -->
        <div @click.capture="maopao1">
            <div @click.capture="maopao2">
                <div @click="maopao3">测试capture</div>
            </div>
        </div>
        <!-- 作用是正常冒泡的顺序是从内到外,当把capture给一层时会
        打乱这个顺序优先触发 -->

只触发一次事件

<!-- .once 只触发一次
        正常事件可以多次触发,可以使用once使得只触发一次 -->

不让子元素触发事件

 <!-- .self 不让子元素触发自己绑定的事件 -->
        <div @click="maopao1">
            <div @click.self="maopao2">
                <div @click="maopao3">测试capture</div>
            </div>
        </div>