养活大部分程序员的Vue

目录

1.概述Vue

2.Vue的安装

3.创建使用应用实例 

4.Vue模板语法-文本渲染 

1.指令

2.文本渲染  v-text指令

3.{{ }} 中的表达式

4.v-html文本渲染html

 5.总结

---

1.概述Vue

      1.vue就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

     2.vue作者尤雨溪.

     2014年 Vue.js发布

     2016年 Vue2.x发布

     2022年 Vue3.x发布

2.Vue的安装

     1.在Vue官网上下载最新3.0版本的Vue文件 "https://unpkg.com/vue@next"

     2.在新建的html文件中通过script引入下载好的Vue文件

3.创建使用应用实例 

1.模板指定

2.创建一个app

3.把app实例挂载到#app节点

4.完整代码如下

  <div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
    </div>
    <script>
        //创建一个app
        const app = Vue.creatApp({
                //定义数据data
                data() {
                    //返回msg
                    return {
                        msg: "你好vue"
                    }
                }
            })
            //把app实例挂载到#app节点
        var vm = app.mount("#app")
    </script>

4.Vue模板语法-文本渲染 

1.指令

指令 是带有 v- 前缀的特殊 attribute。指令 的属性值预期是单个 JavaScript 表达式

 

2.文本渲染  v-text指令

v-text 获取值，会清空标签原有内容，输出的是纯文本

更新元素的 textContent ,更新部分的 textConten t时，需要使用 Mustache 插值

{{msg}}

案例代码：

3.{{ }} 中的表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持 。

4.v-html文本渲染html

为了输出真正的 HTML，你需要使用v-html

<div v-html="raw"></div>


<div v-text="raw"></div>
<div >{{raw}}</div>

 5.总结

Vue的安装与引用

<script src="https://unpkg.com/vue@next"></script>

Vue实例

const app = Vue.createApp({...})

const vm = app.mount('#app')

Vue指令

v-开头的特殊属性

文本渲染指令

 {{}}    v-text    v-html