VUE掘金

于 2022-12-07 16:31:15 发布
阅读量257 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZSDLZ37/article/details/128222443
版权

01声明式渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src="../js/vue.js"></script>
</head>
<!--   CSS   -->
    <style type="text/css">
    
    
    </style>

<body>
    <div id="app" >
            {
  {message1}}
        <br>
            <span v-bind:title="message2">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>

    </div>
    
    
<!--   JS   -->
    <script type='text/javascript'>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
    var app = new Vue({
        el:"#app",       
        data:{
            message1:'Hello Vue!',

            // new Date().toLocaleString默认设置为12小时，会显示上午、下午
            // 24小时
            // new Date().toLocaleString('chinese',{hour12:false});
            message2:"页面加载与" + new Date().toLocaleString(),
       
               
            
        },
        
        

    })
    
    </script>
</body>
</html>

02条件与循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src="../js/vue.js"></script>
</head>
<!--   CSS   -->
    <style type="text/css">
    
    
    </style>

<body>
    <div id="app" >
        
            <p v-if="seen1">现在你看到我了</p>
            <p v-if="seen2">现在你看不到我了</p>
        <br>
        <ol>
            <li v-for="todo in todos">{
  {todo.text}}</li>

        </ol>
            
    </div>
    
    
<!--   JS   -->
    <script type='text/javascript'>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
    var app = new Vue({
        el:"#app",       
        data:{
            // 出现为 true ，消失为 false
            seen1:true,
            seen2:false,

            todos:[
                {text:'学习1'},
                {text:'学习2'},
                {text:'学习3'}
            ]    
        },
        
        

    })
    
    </script>
</body>
</html>

03处理用户输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src="../js/vue.js"></script>
</head>
<!--   CSS   -->
    <style type="text/css">
    
    
    </style>

<body>
    <div id="app">
        <p>{
  {message}}</p>
        <button v-on:click="reverseMessage">反转消息</button>
        <!-- 实现表单的双向绑定 -->
        <input v-model ="message">
    </div>
<!--   JS   -->
    <script type='text/javascript'>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        new Vue({
            el:'#app',
            data:{
                message:'Hello'
            },
            methods:{
                reverseMessage(){
                    //split() 用于一个字符串进行分割成多个字符串数组
                    //split('') 按照字符间的空格进行分割
                    //reverse() 颠倒数组中元素的顺序
                    //jion() 把数组中的所有元素放入到一个字符串中
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    
    </script>
</body>
</html>

04组件化应用构建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src="../js/vue.js"></script>
</head>
<!--   CSS   -->
    <style type="text/css">
    
    
    </style>

<body>
    <div id="app">
<ol>
    <!-- 创建一个 todo-item 组件的实例 -->
     <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
        v-for ="item in groceryList"
        v-bind:todo ="item"
        v-bind:key = "item.id"
    ></todo-item>
</ol>

    </div>
<!--   JS   -->
    <script type='text/javascript'>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
    
        Vue.component('todo-item',{
        props:['todo'],
        template:'<li>{
  {todo.text}}</li>'
       })
    
       
       var app = new Vue({
        el:'#app',
        data:{
            groceryList:[
                {id:0,text:'宝马'},
                {id:1,text:'奔驰'},
                {id:2,text:'丰田'}
                ]
            },
       })

    </script>
</body>
</html>

05数据与方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src="../js/vue.js"></script>
</head>
<!--   CSS   -->
    <style type="text/css">
    
    
    </style>

<body>
    <div id='app'>
        {
  {a}}
        {
  {b}}
    </div>
<!--   JS   -->
    <script type='text/javascript'>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        // 我们的数据对象
        var data ={ a : 1 }
        //该对象被加入到一个Vue 实例中
        var vm = new Vue({
            el:'#app',
            data:data
          })
        
        vm.b = 'hi'
        // 获得这个实例上的propery
        // 返回源数据中对应的字段
        vm.a == data.a // ==> true
        // 设置 property 也会影响到原始数据
        vm.a = 2
        data.a // =>2
        data.a = 3 
        vm.a // => 3

    
    </script>
</body>
</html>

06实例生命周期钩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src="../js/vue.js"></script>
</head>
<!--   CSS   -->
    <style type="text/css">
    
    
    </style>

<body>
    <div>


    </div>
<!--   JS   -->
    <script type='text/javascript'>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
    new Vue({
       data:{
        a:1
       },
       created:function(){
        //this 指向 vm 实例
        console.log('a is:' +this.a)
       }
          })
    
    </script>
</body>
</html>

07模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src="../js/vue.js"></script>
</head>
<!--   CSS   -->
    <style type="text/css">
    
    
    </style>

<body>
    <div id='app'>
<span>Message:{
  {msg1}}</span>
<br>

<!-- 一次性插值，当数据改变时，插值处的内容不会更新 -->
<span v-once>这个将不会改变：{
  {msg2}}</span>
<br>
<p>Using mustaches:{
  {rawHtml}}</p>

<!-- 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html -->
<p>Using v-html directive:<span v-html="rawHtml"></span></p>
<div v-bind:id="dynamicId">123</div>
<br>

<!-- isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。 -->
<button v-bind:disabled="isButtonDisabled">Button</button>
<br>

<!-- 表达式√  -->
{
  {number + 2}} 
<br>
{
  {ok ? 'Yes' :'NO'}} 
<br>
{
  { rawHtml.split('').reverse().join('') }}
<br>

<!-- v-if 指令将根据表达式 seen 的值的真假来插入/移除<p>元素 -->
<p v-if="seen">现在你看到我了</p>
<br>

<!-- v-bind 指令可以用于响应式地更新 HTML attribute -->
<a v-bind:href
最低0.47元/天 解锁文章
QSJZSDLZ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值