Vuejs半小时入门笔记

morningcat2018
18 阅读1分钟 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>myvuedemo</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 挂载点 -->
    <div id="app">
        <!-- 插值表达式 -->
        <p>{{ titleContext }}</p>
        <p>{{ content }}</p>
        <p>{{ output() }}</p>
        <p>{{ outputComputed }}</p>
        <!-- 指令 -->
        <p v-text="textContext"></p>
        <p v-html="htmlContext"></p>

        <!-- 渲染指令 -->
        <p v-for="(item,key,index) in myobj">循环:{{item}}-{{key}}-{{index}}</p>
        <p v-if="isShow">{{content}}</p>
        <p v-show="isShow">{{content}}</p>

        <!-- 属性指令 -->
        <!-- <p v-bind:title="titleContext">属性指令示例</p> -->
        <!-- v-bind: 可以简化为 : -->
        <p :title="titleContext">属性指令示例</p>

        <!-- 事件指令 -->
        <!-- <button v-on:click="changeTitle">事件指令示例</button> -->
        <!-- v-on: 可以简化为 @ -->
        <button @click="changeTitle">事件指令示例</button><br/>

        <!-- 表单指令 v-model可以实现双向数据绑定 -->
        <input type="text" v-model="inputVale">
        <p>{{inputVale}}</p>
    </div>

    <script>
        const vm = new Vue({
            el: '#app', // 指定挂载点
            data() {
                // 响应式数据都要放在data里
                return {
                    titleContext: '标题',
                    content: '这是内容文本',
                    textContext: '<span>textContext</span>',
                    htmlContext: '<span>textContext</span>',
                    myobj: { a: 10, b: 20, c: 30 },
                    isShow: false,
                    inputVale: "输入新内容，查看下面标签内容的变化"
                }
            },
            methods: {
                // methods 属性
                output() {
                    return '标题：' + this.titleContext + ' 内容:' + this.content
                },
                changeTitle() {
                    this.isShow = !this.isShow
                    this.titleContext = this.isShow ? "显示" : "隐藏"
                }
            },
            computed: {
                // 计算属性：具有缓存性，多次调用只计算一次
                outputComputed() {
                    return '标题：' + this.titleContext + ' 内容:' + this.content
                }
            },
            watch: {
                // 侦听器
                titleContext(newValue, oldVale) {
                    console.log(newValue, "-->", oldVale)
                }
            }
        })
    </script>
</body>

</html><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>myvuedemo</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 挂载点 -->
    <div id="app">
        <!-- 插值表达式 -->
        <p>{{ titleContext }}</p>
        <p>{{ content }}</p>
        <p>{{ output() }}</p>
        <p>{{ outputComputed }}</p>
        <!-- 指令 -->
        <p v-text="textContext"></p>
        <p v-html="htmlContext"></p>

        <!-- 渲染指令 -->
        <p v-for="(item,key,index) in myobj">循环:{{item}}-{{key}}-{{index}}</p>
        <p v-if="isShow">{{content}}</p>
        <p v-show="isShow">{{content}}</p>

        <!-- 属性指令 -->
        <!-- <p v-bind:title="titleContext">属性指令示例</p> -->
        <!-- v-bind: 可以简化为 : -->
        <p :title="titleContext">属性指令示例</p>

        <!-- 事件指令 -->
        <!-- <button v-on:click="changeTitle">事件指令示例</button> -->
        <!-- v-on: 可以简化为 @ -->
        <button @click="changeTitle">事件指令示例</button><br/>

        <!-- 表单指令 v-model可以实现双向数据绑定 -->
        <input type="text" v-model="inputVale">
        <p>{{inputVale}}</p>
    </div>

    <script>
        const vm = new Vue({
            el: '#app', // 指定挂载点
            data() {
                // 响应式数据都要放在data里
                return {
                    titleContext: '标题',
                    content: '这是内容文本',
                    textContext: '<span>textContext</span>',
                    htmlContext: '<span>textContext</span>',
                    myobj: { a: 10, b: 20, c: 30 },
                    isShow: false,
                    inputVale: "输入新内容，查看下面标签内容的变化"
                }
            },
            methods: {
                // methods 属性
                output() {
                    return '标题：' + this.titleContext + ' 内容:' + this.content
                },
                changeTitle() {
                    this.isShow = !this.isShow
                    this.titleContext = this.isShow ? "显示" : "隐藏"
                }
            },
            computed: {
                // 计算属性：具有缓存性，多次调用只计算一次
                outputComputed() {
                    return '标题：' + this.titleContext + ' 内容:' + this.content
                }
            },
            watch: {
                // 侦听器
                titleContext(newValue, oldVale) {
                    console.log(newValue, "-->", oldVale)
                }
            }
        })
    </script>
</body>

</html>
avatar
文章
阅读
粉丝