Vue学习笔记（基础篇一）

最新推荐文章于 2024-05-16 16:29:02 发布

清和kyree

最新推荐文章于 2024-05-16 16:29:02 发布

阅读量427

点赞数 2

分类专栏： Vue 文章标签： vue html css javascript

本文链接：https://blog.csdn.net/qq_16680219/article/details/103969429

版权

最近在学习Vue，我觉得学习最好的方式就是把自己的学习过程记录下来，我也是参考Vue官方文档来学习的。学习一门新技术，最好的还是参考官方的文档。我也把学习过程中的代码上传到了github，并且加了动图来展示运行效果，这样看起来或许会更加直观易懂一些。

本文示例代码下载

Vue的声明式渲染

下面是最简单的一个Vue声明式渲染的例子，只需要在html文件中引入vue的js文件。
然后敲下以下代码，你就成功创建了vue的第一个应用。

<body>
    <div id="app">
        <div >{
  {message}}</div>
    </div>

    <script>
        var vm = new Vue({
    
            el: "#app",
            data: {
    
                message: 'Hello Vue!'
            },
        })
    </script>
</body>

现在数据message和 DOM 已经被建立了关联，所有东西都是响应式的。打开浏览器的控制台，并修改 vm.message 的值，可以看到页面上的数据也进行了更新。

当然上面的代码<div >{ {message}}</div>也可以写成<div v-text="message"></div>
Vue的大部分指令都是以v-开头的，比如说：v-text、v-for、v-model、v-if等，这些指令在下面的章节中都会讲到。

Vue的模板语法

插值-绑定文本数据

数据绑定最常见的形式就是使用(双大括号) 语法的文本插值,当然也可以使用v-text进行简单的数据绑定。

<body>
    <div id="app">
        <div >{
  {data1}}</div>
        <div v-text="data2" ></div>
    </div>

    <script>
        var vm = new Vue({
    
            el: "#app",
            data: {
    
               data1:'用{
    {}}进行绑定的',
               data2:'用v-text进行绑定的'
            },
        })
    </script>
</body>

打开控制台可以看到数据已经成功地被渲染到DOM结构中去了。

在声明式渲染中提到过，vue的数据绑定是响应式的，数据发生改变，页面上的数据也会作出改变，但是你如果用v-once进行数据绑定。当数据改变时，插值处的内容不会更新，这个指令的意思是你只能进行一次的插值。

<body>
    <div id="app">
        <div v-once>{
  {data3}}</div>
    </div>

    <script>
        var vm = new Vue({
    
            el: "#app",
            data: {
    
               data3:'我不会被改变',
            },
        })
    </script>
</body>

绑定原始 HTML代码

双大括号或者v-text指令会将html代码解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，vue提供了 v-html指令：

<body>
    <div id="app">
        <div >{
  {data4}}</div>
        <div v-text="data4" ></div>
        <div v-html="data4"></div>
    </div>

    <script>
        var vm = new Vue({
    
            el: "#app",
            data: {
    
               data4:'<h1>我是一个h1的标题<h1>',
            },
        })
    </script>
</body>

在浏览器中，可以发现使用v-html指令绑定的数据，已经成功将数据渲染成html代码内容

在指令中使用 JavaScript 表达式

Vue中对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。你可以绑定一个求和运算公式、拆分数组或者三元表达式。

<body>
    <div id="app">
        <div >计算5+6的值：{
  {data5+data6}}</div>
        <div >三元表达式：{
  {data7 ? 'YES' : 'NO' }}</div>
        <div>拆分重排数组：{
  { data8.split('-').reverse().join('.') }}</div</

最低0.47元/天解锁文章

清和kyree

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（基础篇一）

最近在学习Vue，我觉得学习最好的方式就是把自己的学习过程记录下来，我也是参考Vue官方文档来学习的。学习一门新技术，最好的还是参考官方的文档。我也把学习过程中的代码上传到了github，并且加了动图来展示运行效果，这样看起来或许会更加直观易懂一些。本文示例代码下载Vue的声明式渲染下面是最简单的一个Vue声明式渲染的例子，只需要在html文件中引入vue的js文件。然后敲下以下代码，你就...
复制链接

扫一扫