vue

vue生成html静态文件

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

vue.min.js

使用{{}}渲染属性
data用来写属性和属性值
生成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中渲染的方式-四种

js字符串拼接的方式

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

字符串模版语法拼接

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

数组转字符串join方式拼接

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

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框进行数据绑定,当输入内容时跟着响应数据

面试题:MVC和MVVM的区别

面试题51：MVVM和MVC有什么区别_mvc和mvvm的区别_The..Fuir的博客-CSDN博客

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>

感谢伙伴们耐心观看,本文是个人的学习笔记,今年27岁转行前端程序员,笔记中如有错误还请指正,非常感谢! 如果本篇笔记能给你带来帮助,还请点个关注点个赞感谢支持您的支持也是我不断更新学习笔记的动力~

vue学习笔记day01-6.25--vue基础使用,差值表达式,v-指令

vue