JS框架之Vue

最新推荐文章于 2023-09-12 11:47:12 发布

小王今天更新了吗

最新推荐文章于 2023-09-12 11:47:12 发布

阅读量205

点赞数 1

分类专栏：前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_44895477/article/details/118368794

版权

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

0. vue简介

JavaScript框架
简化Dom操作
响应式数据驱动

1. 第一个vue程序

导入开发版本的Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
创建Vue实例对象，设置el和data属性

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

使用简洁的模板语法把数据渲染到页面上 {{}}

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

2. el:挂载点

作用：用来设置Vue实例挂载（管理）的元素

Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器？
可以使用其他的选择器，但是建议使用ID选择器（一般它是唯一的）
是否可以设置其他的dom元素呢？
可以使用其他的双标签，但不能使用html和body

3. data:数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

4.指令

4.1 v-text

作用：设置标签的文本值
默认写法会替换全部内容，使用**差值表达式{{}}**可以替换指定内容
内部支持写表达式

    <div id='app'>  
        <!-- v-text  设置标签的文本值 会替代掉标签本来的值-->
        <p v-text='message'>cc</p>  <!-- hello-->
        <p v-text='info'>cc</p>     <!-- web 前端 -->
        <p v-text='message+"233"'>cc</p> <!-- 拼串 hello233 -->
        <!-- 当只写入部分值的时候 推荐使用{{}} -->
        <p>{{message}}cc</p>
    </div>

<script>     
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello',
            info:'web 前端'
        }
    })
</script>

4.2 v-html

v-html指令的作用是：设置元素的innerHTML
内容中有html结构的会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

 <h2 v-text='content'></h2> <!-- <a href='http://www.baidu.com'>百度</a> -->
      <h2 v-html='content'></h2> <!-- 百度 -->

 var app=new Vue({
        el:'#app',
        data:{
            message:'hello',
            info:'web 前端',
            content:"<a href='http://www.baidu.com'>百度</a>"
        }
    })

4.3 v-on

v-on:click----@click
v-on:mouseenter----@mouseenter
v-on:sblclick----@sblclick
可以用@代替v-on:
methods：写方法
v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

4.4 v-show 根据表达式的真假，切换元素的显示和隐藏

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

<body>
    <div id='app'>
        <h1>--------------v-text---------------</h1>
        <!-- v-text  设置标签的文本值 会替代掉标签本来的值-->
        <p v-text='message'>cc</p>  <!-- hello-->
        <p v-text='info'>cc</p>     <!-- web 前端 -->
        <h1 v-html='info'></h1>  <!-- web 前端 -->
        <p v-text='message+"233"'>cc</p> <!-- 拼串 hello233 -->
        <!-- 当只写入部分值的时候 推荐使用{{}} -->
        <p>{{message}}cc</p>

        <h1>--------------v-html---------------</h1>
        <h2 v-text='content'></h2> <!-- <a href='http://www.baidu.com'>百度</a> -->
        <h2 v-html='content'></h2> <!-- 百度 -->

        <h1>--------------v-on---------------</h1>
        <button type="input" v-on:click='doIt'>点击按钮</button>
        <button type="input" @click='doIt'>点击按钮-简写</button>
        <button type="input" v-on:dblclick='doIt'>点击按钮-双击</button>
        <button type="input" @dblclick='changeMessaga'>点击按钮-双击-改变数据内容{{message}}</button>

        <h1>--------------v-show---------------</h1>
        <input type="button" value="切换图片显示状态" @click='showCat'> 
        <input type="button" value="add age" @click='addAge'> 
        <button>{{age}}</button>
        <img v-show='show' src="https://th.bing.com/th/id/Rc764ef3c0ea0f49df5206431e7297041?rik=A33fNPg1%2blQMMA&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f131108%2f3-13110Q63100.jpg&ehk=PyCTwApXTRwsRjCzg2V%2b2lWCz%2boHm3aprDEqRvwaDUI%3d&risl=&pid=ImgRaw" alt="小猫">
        <img v-show='age>18' src="https://th.bing.com/th/id/Rc764ef3c0ea0f49df5206431e7297041?rik=A33fNPg1%2blQMMA&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f131108%2f3-13110Q63100.jpg&ehk=PyCTwApXTRwsRjCzg2V%2b2lWCz%2boHm3aprDEqRvwaDUI%3d&risl=&pid=ImgRaw" alt="小猫">     
    </div> 
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello',
            info:'web 前端',
            content:"<a href='http://www.baidu.com'>百度</a>",
            show:false,
            age:17
        },
        methods:{
            doIt:function(){
                alert('do it~');
            },
            changeMessaga:function(){
                this.message+='web!!';
            },
            showCat:function(){
                this.show=!this.show;
            },
            addAge:function(){
                this.age++
            }
        }
    })

小王今天更新了吗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JS框架之Vue

0. vue简介JavaScript框架简化Dom操作响应式数据驱动1. 第一个vue程序导入开发版本的Vue.js<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>创建Vue实例对象，设置el和data属性var app = new Vue({ el: '#app', data: {
复制链接

扫一扫