Vue学习记录

最新推荐文章于 2024-05-23 23:37:52 发布

huadaoguluo

最新推荐文章于 2024-05-23 23:37:52 发布

阅读量122

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/huadaoguluo/article/details/105507663

版权

引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue的响应式系统

<!-- data对象中的所有属性都在Vued响应式系统，数据属性值变化，视图会进行重渲染。当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性，它的改动不会发生任何变化，所以我们需要设置一些初始值 -->
<body>
  <div id="app-8">
      <p>{{ a }}</p>
      <button v-on:click="a = a+1">Change it</button>	//点击计数
  </div>
  <script type="text/javascript">
    var data = {
            a: 1
        }
        Object.freeze(data) //这行会阻止修改现有属性，响应系统无法在追踪变化
        var vm = new Vue({
                el: '#app-8',
                data: data
            })
            // data.a = "这里是一个响应式系统"	data.a == vm.a ==> True
            //除了数据属性，一些实例属性与方法在响应式系统之中，它们都有前缀$，以便与用户定义的属性进行区分。
        	//Vue的一些实例属性及实例方法  -->	https://cn.vuejs.org/v2/api/
        	vm.$data = data
            vm.$el = document.getElementById('app-8')
    </script>
</body>

组件化应用的初级构建

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

    <script type="text/javascript">
        // 定义名为 todo-item 的新组件
        Vue.component('todo-item', {
            props: ['todo'],	// "prop"，类似于一个自定义 attribute
            template: '<li>{{ todo.text }}</li>'
        })
        var app7 = new Vue({
            el: '#app-7',
            data: {
                testList: [{
                    id: 0,
                    text: "蔬菜"
                }, {
                    id: 1,
                    text: "水果"
                }, {
                    id: 2,
                    text: "番茄西红柿"
                }]
            }
        })
    </script>

</body>

模板语法-Mustache

数据绑定-{{}}

数据绑定最常见的形式就是使用  {{}}  的文本插值：
使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
<span v-once>数据绑定: {{ msg }}</span>

属性值: v-bind

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令，即：
<div v-bind:id="dynamicId"></div>

对于布尔 attribute (存在就意味着值为true)，而v-bind，在这个例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

v-on和v-bind的缩写

v-on
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-bind
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

计算属性-computed

计算属性就是将我们经常用到的运算，封装成像可以再次使用的属性一样
<body>
    <div id="app-10">
        <p>原始消息："{{message}}"</p>
        <p>反转之后："{{reverseMessage}}"</p>
        <button @click='message = reverseMessage'>点击查看</button>
    </div>
	//实现内容的反转
    <script type="text/javascript">
        app10 = new Vue({
            el: "#app-10",
            data: {
                message: "点击查看神奇的事情",
            },
            computed: {
                reverseMessage: function() {
                    return this.message.split('').reverse('').join('')
                }
            }
        })
    </script>
</body>

<body>
	//数据绑定最常见的形式就是使用  {{}}  的文本插值：
    <div id="app-9">
        <span>数据绑定: {{ msg }}</span>
        <button v-on:click="msg = msg+1">计算次数</button>
    </div>

    <script type="text/javascript">
    	app9 = new Vue({
        el: '#app-9',
        data: {
            msg: msg.msg
        }
    })
    </script>
</body>

//使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
<span v-once>数据绑定: {{ msg }}</span>

huadaoguluo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习记录

引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者：<script src="https://cdn.jsdelivr.net/npm/...
复制链接

扫一扫