VUE学习一

<html>
 <head>head>
 <body>
  <div id="app"> 
   <input type="text" v-model="username" /> 
   <p>Hello, {{username}}p> 
  div> 
  <script type="text/javascript" src="../js/vue.js">script> 
  <script type="text/javascript"> new Vue({ 
    el:
'#app', data: { username: 'atguigu' }  
    })script>
 body>
html>
<html>
 <head>head>
 <body>
  <div id="app"> 
   <h2>1. 双大括号表达式h2> 
   <p>{{msg}}p> 
   <p>{{msg.toUpperCase()}}p> 
   <h2>2. 指令一: 强制数据绑定h2> 
   <a href="url">访问指定站点a>
   <br />
    
   <a v-bind:href="url">访问指定站点 2a>
   <br /> 
   <a :href="url">访问指定站点 3a>
   <br /> 
   <h2>3. 指令二: 绑定事件监听h2> 
   <button v-on:click="handleClick">点我button> 
   <button @click="handleClick">点我 2button> 
  div> 
  <script type="text/javascript" src="../js/vue.js">script> 
  <script type="text/javascript"> new Vue(
{
  el:
'#app',
  data: {
msg: 'NBA I Love This Game!', url: 'http://www.baidu.com' },
  methods: { handleClick () { alert('处理点击') }
}
})
</body> </html>

VUE学习一_第1张图片

 

 

 

 

 

 

 

 

<html>
 <head>head>
 <body>
  <div id="demo">
    姓: 
   <input type="text" placeholder="First Name" v-model="firstName" />
   <br /> 名: 
   <input type="text" placeholder="Last Name" v-model="lastName" />
   <br /> 姓名 1(单向): 
   <input type="text" placeholder="Full Name" v-model="fullName1" />
   <br /> 姓名 2(单向): 
   <input type="text" placeholder="Full Name" v-model="fullName2" />
   <br /> 姓名 3(双向): 
   <input type="text" placeholder="Full Name2" v-model="fullName3" />
   <br /> 
  div>

 
  

 


body> html>

 

你可能感兴趣的:(VUE学习一)