vue入门

最新推荐文章于 2024-04-08 19:47:41 发布

LYJ_holy

最新推荐文章于 2024-04-08 19:47:41 发布

阅读量86

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/LYJ_holy/article/details/127682371

版权

1、vue是什么

vue是专注于view层的一套构建用户界面的渐进式前端js框架，采用的是自底向上增量开发的设计，核心库只关注视图

2、vue能做什么

1、几乎没有dom操作

2、适合做单页web网站开发(spa(SinglePageApplication)项目开发)

3、传统网站开发

3、vue的特点

通过指令扩展了HTML，通过表达式绑定数据到HTML

4、el和data以及methods作用

1、el 作用：

1、指定/设置当前vue实例所管理的视图

2、值也可以是其他选择器(class等) - 如果有多个同名的只有第一个会生效，所以推荐使用 id选择器

3、值也可以是dom元素 - document.getElementById("id名")

注意：不能让el直接管理html或者body 报错！

2、data 的作用：

1、指定/设置当前vue实例所管理的视图中要使用的数据

2、data值可以是一个对象

3、data中的数据可以通过vue实例对象，属性名(vm.msg) 去访问，也可以通过 vm.$data.msg形式去访问

特点：响应式数据(当数据变化时，视图中数据的位置会自动发生变化)

3、method 作用：

1、可以在methods模块里面书写方法，模块里的this指向的是当前vue实例对象

注意：不推荐使用箭头函数，this指向的不是vm对象

5、插值表达式

用法： {{ data中的数据 }}

注意：在var a=10 if for 中不能写插值表达式

6、指令：

1、所有指令都是v-开头

2、所有指令都在开始标签位置

3、每个指令都是为了取代dom操作

7、指令详细用法

1、v-text 作用：替换标签的全部内容 -- 会替换{{}}插值表达式的位置(插值表达式被替换而不能显示)

2、v-html 作用：替换标签的全部内容 -- v-html可以识别字符串中的标签和js代码

<body>
    <div id = "app">
        {{msg}}
        <p v-text="text">{{text}}</p>
        <p v-html="text">{{text}}</p>
    </div>
    <script src="vuejs-2.5.16.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"你好靓仔"
                text:"<h1>你好叼毛</h1>"
            }
        })
    </script>
</body>

可以看到p标签中间 {{ text }}取值被v-text和v-html标签取代了，而且h1标签被v-html解析了

注意：不推荐使用v-html 安全问题(容易受到xss - 跨站脚本攻击)

3、v-on 作用：绑定事件语法： @事件名.修饰符=" methods中的方法 "

常用修饰符：once和prevent

<input type="button" @clik="fun1()" value="按钮"/>

methods:{
    fun1(){
        console.log("v-on 事件的函数")
    }
}

可以看到p标签中间 {{ text }}取值被v-text和v-html标签取代了，而且h1标签被v-html解析了

注意：不推荐使用v-html 安全问题(容易受到xss - 跨站脚本攻击)

3、v-on 作用：绑定事件语法： @事件名.修饰符=" methods中的方法 "

常用修饰符：once和prevent

<ul>
    <li v-for="(v,i) of items" :key="i">{{v}}</li>
</ul>

<ol>
    <li v-for="(v,k,i) of taget" :key="i">{{v}}</li>
</ol>

5、v-bind 作用：绑定任何不确定的标签的属性值

语法：v-bind：要绑定的属性名="data中的数据"

图中和src绑定了，所以src是可变的，可以在data里随时修改图片路径
6、v-model 作用：绑定表单元素(textarea、input、radio、checkbox)

语法：v-model="data中的数据"

LYJ_holy

关注

0
点赞
踩
0

收藏

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

1、v-text 作用：替换标签的全部内容 -- 会替换{{}}插值表达式的位置(插值表达式被替换而不能显示)2、v-html 作用：替换标签的全部内容 -- v-html可以识别字符串中的标签和js代码。可以看到p标签中间 {{ text }}取值被v-text和v-html标签取代了，而且h1标签被v-html解析了。可以看到p标签中间 {{ text }}取值被v-text和v-html标签取代了，而且h1标签被v-html解析了。
复制链接

扫一扫