vue入门

最新推荐文章于 2023-04-02 11:15:07 发布

烟雨平生ing

最新推荐文章于 2023-04-02 11:15:07 发布

阅读量217

点赞数

分类专栏：大前端系列文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_44058265/article/details/120632425

版权

大前端系列专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

1、概述
2. idea 安装 Vue 插件
- idea 安装 Vue 插件没有Vue component选项
3. 下载地址
4. vue入门 -- hello,vue!
5. Vue常用7个属性
6. Vue - 指令

1、概述

Vue (读音/vju/,类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。
与其它大型框架不同的是, Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易上手,还便于与第三方库(如: vue-router:跳转, vue-resource:通信, vuex:管理)或既有项目整合。
官网: https://cn.vuejs.org/v2/guide/

2. idea 安装 Vue 插件

点击 file 打开设置 settings
选择Plugins,搜索vue.js安装

idea 安装 Vue 插件没有Vue component选项

点击 file 打开设置 settings，展开 Editor 找到 file and code templates
找到 Vue single file component 并选中它，然后点击copy
复制后底部出现了一个新的文件
把 Name 改成 Vue Component，然后把代码里的 “COMPONENT_ ”删掉，最后点 ok 就完事了

3. 下载地址

开发版本
- 包含完整的警告和调试模式: https://vuejs.org/js/vue.js
- 删除了警告，30.96KB min + gzip: https://vuejs.org/js/vue.min.js
CDN
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

4. vue入门 – hello,vue!

1、在html中通过cdn导入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

2、绑定标签，传输数据，标签用{}接收数据

<body>

<div id="aaa">
    {{message}}
</div>

<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#aaa",
        data:{
           message:"hello,vue!"
        }
    });
</script>

5. Vue常用7个属性

el属性。用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符。
data属性。用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性。用来设置模板，会昔换页面元素，包括占位符。
methods属性。放置页面中的业务逻辑，
js方法- 般都放置在methods中render属性。创建真正的Virtual Domcomputed属性。用来计算
watch属性 watch:function(new,old){}。
- 监听data中数据的变化。
- 两个参数，，一个返回新值，一个返回旧值，

6. Vue - 指令

你看到的v-bind等被称为指令。指令带有前缀ⅴ-,以表示它们是νue提倛的特殊特性。可能你已经猜到了,它们会在渲染的DOM上应用特殊的响应式行为。

6.1 v-bind – 绑定元素特性

可以使用bind指令来绑定元素特性!
指令的意思是:“将这个元素节点的tite特性和vue实例的 message属性保持一致”。

你再次打开浏览器的 JavaScript控制台,输入 app. message=‘新消息’,就会再一次看到这个绑定了tite特性的HTML已经进行了更新

<body>

<div id="aaa">
        <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
</div>

<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#aaa",
        data:{
           message:"hello,vue!"
        }
    });
</script>
</body>

在这里插入图片描述

6.2 v-if,v-else

条件判断语句

v-if
v-else

if – else

<div id="app">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>

<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        data:{
           ok:true
        }
    });
</script>

在这里插入图片描述

if – else if – else

<div id="app">
    <h1 v-if="type=='A'">A</h1>
    <h1 v-else-if="type=='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        data:{
           type:'A'
        }
    });
</script>

6.3 v-for

循环语句
v-for=“item in items” 类似于 for(Object item : items)

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        data:{
           items:[
               {message:"java"},
               {message: "c++"}
           ]
        }
    });
</script>

在这里插入图片描述

items数组自动包含index序号

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    </li>
</div>

<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        data:{
           items:[
               {message:"java"},
               {message: "c++"}
           ]
        }
    });
</script>

在这里插入图片描述

6.4 v-on 指令 – 监听事件

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

示例：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
</script>

事件处理方法

在 methods 对象中定义方法
示例：

<div id="example-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
</div>

<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var example2 = new Vue({
        el: '#example-2',
        data: {
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })
</script>

在这里插入图片描述

烟雨平生ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门

文章目录1、概述1、概述Vue (读音/vju/,类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是, Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易上手,还便于与第三方库(如: vue-router:跳转, vue-resource:通信, vuex:管理)或既有项目整合。官网: https://cn.vuejs.org/v2/guide/...
复制链接

扫一扫