寒酥丶
寒酥丶

Vue中必掌握的知识

Vue入门基础

  • 一、什么是vue
  • 二、与原生JS的区别
  • 三、数据绑定
    • 1、内容绑定
    • 2、属性绑定
    • 3、表单标签的值
  • 四、事件处理
  • 五、列表渲染
  • 六、条件渲染
  • 七、Class与Style绑定
  • 八、计算属性
  • 九、侦听器
  • 十、插槽
    • 插槽内容
    • 后备内容
    • 具名插槽

一、什么是vue

vue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、与原生JS的区别

我们可以通过一个小案例来演示

案例：把输入框中的信息实时显示在span标签中

  • 原生JS

    <body>
    <input id='txt' type="text">
    <span id='con'></span>
</body>
<script>
    document.querySelector('#txt').addEventListener('keyup', function () {
       
        document.querySelector('#con').innerHTML = this.value
    })
</script>

  • Vue

    
    
    
        
        {
      {msg}}

    区别：其中明显的区别就是省去了对DOM元素的操作

  • 总结：

    1. 创建DOM元素，使其成为Vue实例的挂载点，Vue实例中的所有数据这能在挂载点中使用

      <div id=app>
div>

    2. 通过new Vue来创建实例对象

    3. el属性指定当前Vue实例的挂载点

    4. data中是模型数据，这些数据依赖于当前Vue的实例，可以通过控制台输入app.msg来查看数据

    5. 可以通过插值表达式使用data中的数据

三、数据绑定

数据绑定就是将Vue实例中的data属性中的数据显示在挂载点中

1、内容绑定

将data中的数据显示成内容

<div id='app'>
    <p>{
    {msg}}p>
div>

若想显示html标签只要是标签中用v-html即可

<div id='app'>
    <p v-html>{
    {msg}}p>
div>

2、属性绑定

将data中的数据作为某个元素的属性值

使用v-bind即可，属性可以是内置的，也可以自定义的,简写方式:

<p v-bind:id="id" :class="class">{
    {msg}}p>

3、表单标签的值

可以使用v-model指令在表单标签中使用双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

1、文本框和文本域

<input type:'text' v-model="msg">input>
<textarea v-model:'msg'><textarea>

2、复选框

单选框


	
    
    
    
   {
    {gender}}

下拉框


    
    {
    {city}}

传递参数

四、事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id=app>
    <button v-on:click='greet'>button>
div>

var app = new Vue({
     
    el:'#app',
    data:{
     
        name:'holle Vue'
    },
    //在 methods 中定义方法
    methods:{
     
        greet:function(event){
     
            //this在方法中指向Vue实例
            alert(this.name + '!')
            if (event) {
     
        		alert(event.target.tagName)
        	}
    }
})

五、列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<div id='app'>
	<ul>
 		<li v-for="blog in blogs">{
    {blog}}li>
    ul>
    <ul>
        <li v-for="stu in stus">姓名：{
    {stu.name}} 年龄：{
    {stu.age}}li>
    ul>
div>

var app = new Vue({
     
    el:"#app",
    data:{
     
        blogs:['三国演习','西游记','老夫子'],
        stus:[
            {
     name:'小明',age:18},
            {
     name:'小张',age:11},
            {
     name:'小王',age:12}
        ]
    }
})

从服务器中获取数据


    

      
    
        
  • {
    {item.title}}
    •

六、条件渲染

1、v-if指令用于条件性的渲染一块内容

hello Vue

2、也可以使用v-else添加一个else块

hello Vue


hello world

3、在