vue.js细小注意点总结

<p>当下正在学习vue.js 2.0版本的，所以以下几点皆是围绕2.0版本来说的。</p><p><br></p><h3>1.如何为img 的src属性赋值？</h3><blockquote><p>通过src="{{src_url}}"这种方式，vue会报错。</p></blockquote><p>正确的方式：</p><pre><a href="v-bind:src=" src_url""="">v-bind:src="src_url"</a> (src_url为vue里的data属性变量)<br></pre><blockquote><p>总结：凡是html标签里引号里需要读取的变量，都采用v-bind方式。</p></blockquote><p>例如添加class样式：</p><pre><a href="v-bind:class=" class_name""="">v-bind:class="class_name"</a></pre><h3><br></h3><h3>2.给dom元素添加了事件，如何在事件方法里获取dom元素实例本身？</h3><p>html里如下编写：<br></p><pre><a href="v-on:click=" testclick""="">v-on:click="testClick"</a></pre><p>和javascript不同的是，这里testClick方法不用带参数。</p><p><br></p><p>js代码里function带上参数，如下。<br></p><pre>methods:{<br>    func_name: function(ele){<br>         var self = this;<br>         var curItem = $(ele.target);    <br> }<br>}<br></pre>其中<pre>$(ele.target)</pre><p>就是获取当前的dom元素对象</p><p><br></p><p><br></p><h3>3.html代码直接原样显示，如何使其按照html方式显示。</h3><p>从服务器端获取的某些数据是带html标签的。</p><p>通过{{}}这种方式显示，直接是一串html代码。</p><p>通过如下方式可解决：</p><pre>&lt;div class="example" v-html="var_html"&gt;&lt;/div&gt;</pre><blockquote><p>注意：example的这个div仍然存在，var_html只是插入在这个div里，并没有替换掉外标签。</p></blockquote><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p>