VueJs笔记01-视频小码哥

1、Vue 是一套用于构建用户界面的渐进式框架。

2、标签自动补全

       纯标签+地址id：输入h1#ccg,按Tab键，

<h1 id="cgg"></h1>

        纯标签+类“class” ：输入h1.ccg,按Tab键，

<h1 class="ccg"></h1>

       标签+子标签+子标签个数 ：输入div>p*6,按Tab键

<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

3、Webstorm运行时显示系统找不到文件，需要配置浏览器即在settings-Web Browsers-Chrome安装路径复制上。

4、Vue案例：计数器

新指令：v-on，也可以用@click

  <button v-on:click="add">+</button>  //新指令：v-on
  <button v-on:click="sub">-</button> 

Vue属性：el（字符串类型，决定Vue实例会管理哪一个DOM）、data（对象类型，Vue实例中对应的数据对象）、methods（定义Vue的一些方法）

<script>
    const app=new Vue({
      el:'#app',
      data:{
        counter:0
      },
    methods: {            //新属性：methods，定义方法
        add:function () {
          console.log('add被执行');
          this.counter++       //想要data变量就得用this
        },
        sub:function (){
          console.log('sub被执行');
          this.counter--
        }
    }
    })
</script>

5、Vue的MVVM:Model（js）、View(DOM)、ViewModel(Vue实例)

6、v-once指令：该指令表示元素和组件只渲染一次，界面不会随着数据的改变而改变。

  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>

7、v-html指令：后面跟一个string类型，并将string的html解析出来并进行渲染

 v-text使用少，会覆盖掉后面的东西

v-pre

v-cloak

  <h2 v-text="message">大连</h2> //覆盖掉了后面内容
  <h2 v-html="url"></h2>