!DOCTYPE htmlhtml head meta charset=UTF-8 titletitle head script src=vuejsscript body div id=app input type=text v-model=cityName div script var vm=new Vue el#app data cityNameNanCho

这是一个使用Vue.js实现的双向数据绑定的示例。具体步骤如下：

1. 引入Vue.js库。

2. 在HTML中创建一个id为“app”的div元素，作为Vue实例的挂载点。

3. 在Vue实例中定义一个data对象，包含一个名为“cityName”的属性，初始值为“NanChong”。

4. 在HTML中通过v-model指令将输入框的值与cityName属性进行双向绑定。

5. 在Vue实例中定义一个watch对象，监听cityName属性的变化，并在变化时打印出新旧值。

6. 在页面加载完成后，创建一个Vue实例并将其挂载到id为“app”的div元素上。

总的来说，这段代码通过Vue.js实现了基本的双向数据绑定功能，可以实时监听和响应输入框的变化。同时，通过watch对象可以对属性的变化进行监控和处理。