简述如何优化网站的方法/免费网站推广软件下载

1.vue基本使用

• 1.引入vue.js
• 2.创建vue对象
  • el ： 指定根element(选择器)
  • data ： 初始化的数据
• 3.双向数据的绑定 : v-model
• 4.显示数据 : {{xx}}

<div id = "app"><input type="test" v-model="username"><p>hello {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">const vm = new Vue({el : '#app',data : {username : "aaguid"}})
</script>

上下同步

2.模板语法

2.1 v-html

v-html为绑定标签

<div id="app">
<!--    v-html为标签v-text为文本--><p v-html="msg"> </p></div><script src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el : "#app",data : {msg : '<a href="test.html">1</a>'}})
</script>

生成一个超链接

2.2 v-text

v-text为绑定文本数据

<div id="app">
<!--    v-html为标签v-text为文本--><p v-text="msg"> </p></div><script src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el : "#app",data : {msg : '<a href="test.html">1</a>'}})
</script>

2.3 v-bind

强制数据绑定

<!--  <a v-bind:href="url">访问指定站点2</a><br>--><a :href="url">访问指定站点2</a><br><a v-bind:href="url">访问指定站点2</a><br>

有两种方法的绑定

Vue

    data: {content: 'NBA I Love This Game',url: 'http://www.atguigu.com'},

生成的为一个链接的效果

2.4 v-on

绑定事件监听

举例说明
v-on:click
@click

  new Vue({el: '#app',data: {content: 'NBA I Love This Game',url: 'http://www.atguigu.com'},methods: {test1 () {alert('好啊!!!')},test2(content){alert(content)}}})

可以传参也可以不传参