Vue的简单样例0

最新推荐文章于 2023-10-16 12:32:14 发布

甜美河边的钓鱼人

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量145

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/chenjianhuideyueding/article/details/107322645

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 这里写相应的标签 -->
 
<!-- 引入相应的依赖 -->
<script src="../js/vue.js"></script>

<!-- script里面写vue代码 -->    
<script>
    
</script>
    
</body>
</html>

vue的helloworld:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 这里写相应的标签 -->
<div id = "app">{{helloVue}}
    
<!-- 引入相应的依赖 -->
<script src="../js/vue.js"></script>

<!-- script里面写vue代码 -->    
<script>
    const  app = new Vue({
        el: '#app',  // 挂载标签的id
        data: {
            helloVue: 'hello vue'  // 该vue实例定义的data属性可以用 {{xxx}} 取值
        }
    })
</script>
    
</body>
</html>

接下来的所有样例都是采用上述的结构进行测试:

vue条件语句：

<div id = "app1">
    <p v-if="seen">现在你看到我了</p>
</div>


<script>
  const app1 = new Vue({
        el: '#app1',
        data: {
            seen: false
        }
    })
</script>

将上述代码放入到浏览器执行，一开始是看不到上述的标签的内容的，你可以在浏览器的按F12，在console控制台进行操作相应的属性，输入： app1.seen=true 回车就可以看到上述的标签内容了

vue循环的使用：

<div id = "app2">
   <ol>
       <li v-for="item in list">{{item}}</li>
   </ol>
</div>

<script>
const app2 = new Vue({
        el: '#app2',
        data: {
            list: ["hello0","hello1","hello2"]
        }
    })
</script>

在console控制端可以输入：app2.list.push('hello3')，这样会加入一个列表数据

vue表单输入和运用状态的双向绑定

<div id = "app3">
    <p>{{message}}</p>
    <input v-model="message">
</div>

<script>
 const app3 = new Vue({
        el: '#app3',
        data: {
            message: ''
        }
    })
</script>

这个默认为空，当输入框输入内容的时候，会直接显示内容。

vue逆转消息

<!--逆转消息-->
<div id = "app4">
    <p>{{message}}</p>
    <button v-on:click="reverseVal">reverse</button>
</div>

<script>
  const app4 = new Vue({
        el: '#app4',
        data: {
            message: "reverse"
        },
        methods: {
            reverseVal: function () {
              this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>

v-on:xxx 是一个事件绑定的元素，xxx为相应的事件，click为一个点击事件，里面的reverseVal为一个方法的名字，其中message为变量，初始化的内容为：reverse，当点击button后，会将内容反转。

vue展示title

<div id = "app">
    <!--让属性message的值和span标签的title属性值保持一致-->
    <!--v-bind表示绑定属性-->
    <span v-bind:title="message">hello</span>
</div>

<script>
     const  app = new Vue({
        el: '#app',
        data: {
            message: "hello"
        }
    })
</script>

v-bind可以绑定vue实例和标签的属性，span标签的title属性，当鼠标移动到上面的时候，会弹出title的提示语，

vue钩子方法created:

<script>
    // 可以在vue实例被创建之后，执行created方法
    new Vue({
        data: {
            a: 1
        },
        created: function () {
            // `this` 指向 vm 实例
            console.log('a is: ' + this.a)
        }
    })
</script>

Vue冻结属性，防止修改

<div id="app">
    <p>{{ foo }}</p>
    <!-- 这里的 `foo` 不会更新！ -->
    <button v-on:click="foo = 'baz'">Change it</button>
</div>

<!--变量前面加入$表示vue自带的系统变量，这个可以跟用户自定义的变量分开来-->
<script>
    var obj = {
        foo: 'bar'
    }

    // 这里可以冻结obj这个参数，就是当上述的button点击后，
    // 值bar不会修改成baz
    Object.freeze(obj)

    new Vue({
        el: '#app',
        data: obj
    })
</script>

Vue组件的设置：

<div id="components-demo">
    <!--这里可以给多个记录，每一个会创建一个vue实例，单独存储相应的count-->
    <button-counter></button-counter>
</div>

<script>
    Vue.component('button-counter', {
        // 组件的data并不是直接返回相应的属性值，而是通过一个方法来返回，
        // 那么每个实例都会维护一个返回的对象
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    new Vue({
        el: '#components-demo'
    })
</script>

这里自定义了一个组件button-counter，所以当使用标签： <button-counter></button-counter>时，会直接定位到下面相应的组件：button-counter，则会渲染template里的标签信息

组件自定义标签的属性：

<div id="components-demo">
    <!--这个title,可以在定义组件的时候声明，同时设置使用的位置,这个属性跟系统的标签的属性使用时一样的-->
    <button-counter title="caraliu"></button-counter>
</div>


<script>
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        props: ['title'],// 声明自定义标签的属性
        // 在模板中，使用自定义的标签的属性{{title}}
        template: '<button v-on:click="count++">You clicked me {{ count }} times {{title}}</button>'
    })

    new Vue({
        el: '#components-demo'
    })
</script>

甜美河边的钓鱼人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的简单样例0

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script src="../js/vue.js"></script&...
复制链接

扫一扫