01、Vue-基本使用

01、Vue-基本使用


<html>
	<head>
		<meta charset="utf-8" />
		<title>行找的皮卡丘title>
		
		<script src="./js/vue.min.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">

			<p>{{text}}p>
			

			<span id="app" v-html='msg'>span>
			

			<a v-bind:href='url'>{{url}}a>
			

			<p>{{titel.split("").reverse().join("")}}p>
			

			<p v-if="seen">判断seen是否为真p>
			

			<p>{{message}}p>
			<button v-on:click="reverseMessage">点我button>
			

			<p>{{res}}p>
			<input type="text" v-model="res">
			
			
			

			<div>{{istrue}}div>
		div>
	body>
	<script>
		new Vue({ // 创建一个vue对象
			el: '#app', // 标签定位
			// 数据驱动视图
			data: { // 既可以是一个对象 也可以是一个函数
				text: '文本插入',
				msg: '

html插入

'
, url: 'www.baidu.com', titel: 'HBuilder', seen: true, message: "反转字符串", res: "双向数据绑定", istrue: 1 == 1, }, // template:`
{{text}}
`,
//如果template中定义了内容 优先加载template模板 否则加载#app模板 methods: { reverseMessage: function(e) { this.message = this.message.split('').reverse().join('') } } })
script> html>

你可能感兴趣的:(Vue学习基础,html,vue)