vue起步

vue起步

vue起步

引包

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue起步和插值</title>
</head>
<body>
    <div id="app">
    <span>插入变量</span>
        <h2>
            {{ msg }}
        </h2>
        <span>插入数字</span>
        <h3>
            
            {{ 2 }}
        </h3>
        <span>插入字符串</span>
        <h3>
            
            {{ "hello" }}
        </h3>
        <span>插入对象</span>
        <h3>
            
            {{ {id:1} }}
        </h3>
        <span>插入表达式</span>
        <h3>
            
            {{ 1>2 ? '真':'假' }}
        </h3>
        <span>插入字符串并反转</span>
        <h3>
            
            {{ txt.split('').reverse().join('') }}
        </h3>
        <span>调用方法</span>
        <h3>
            
            {{ getContent() }}
        </h3>
    </div>
    
    <!-- 1. 引包-->
	<script src="./vue.js"></script>
	<script>
		//console.log(Vue)
        // 2.初始化
        const vm = new Vue({
            el: '#app',
            // 数据属性
            data: {
                msg: 'hello vue',
                txt: 'hello',
                msg2: 'content'
            },
            // 方法
            methods: {
            	getContent(){
            		return this.msg + ' ' + this.msg2;
            	}
            }
        })
        // vm整个实例，包含属性msg: (...) txt: (...) msg2: (...)
        console.log(vm)
        // vm.$data vm._data 相同
        console.log(vm.$data)
        console.log(vm._data)
        console.log(vm._data.msg)
        console.log(vm.msg)
	</script>
</body>
</html>

启动 new Vue(options);

options

目的地 el

数据 data 保存数据属性

核心:数据驱动视图

posted on 2020-01-16 16:44 anyux 阅读(132) 评论(0) 收藏举报